bri-components 1.2.0 → 1.2.2

package/src/components/controls/senior/selectUsers/selectUsers.vue

@@ -0,0 +1,482 @@
+<template>
+    <div class="selectUsers">
+        <bri-tooltip
+            :content="showVal"
+            placement="top"
+            :transfer="true"
+            maxWidth="200"
+        >
+            <!-- 编辑 -->
+            <div
+                v-if="canEdit"
+                :class="{
+                    ...commonClass,
+                    'selectUsers-edit': true
+                }"
+                @mouseenter="isHover = true"
+                @mouseleave="isHover = false"
+                @click="clickInput"
+            >
+                <template v-if="!$isEmptyData(curValList)">
+                    <dsh-tags
+                        class="text"
+                        :list="curValList"
+                        :propsObj="{
+                            disabled: !finalCanEdit
+                        }"
+                        @delete="clickDeleteItem"
+                    ></dsh-tags>
+
+                    <Icon
+                        v-if="selfPropsObj._clearable && isHover"
+                        class="icon-close"
+                        type="md-close"
+                        @click.stop="clickClear"
+                    />
+                    <Icon
+                        v-else
+                        class="icon-default"
+                        :type="`${multiple ? 'ios-people' : 'ios-person'}`"
+                    />
+                </template>
+
+                <template v-else>
+                    {{ emptyShowVal }}
+                </template>
+            </div>
+
+            <!-- 查看 -->
+            <div
+                v-else
+                :class="{
+                    ...commonClass,
+                    'selectUsers-show': true
+                }"
+            >
+                <dsh-tags
+                    v-if="!$isEmptyData(curValList)"
+                    class="text"
+                    :list="curValList"
+                    :propsObj="{
+                        closable: false
+                    }"
+                ></dsh-tags>
+
+                <template v-else>
+                    {{ emptyShowVal }}
+                </template>
+            </div>
+        </bri-tooltip>
+
+        <!-- 搜索选择框 -->
+        <dsh-modal
+            v-if="finalCanEdit"
+            class="selectUsers-modal"
+            v-model="showModal"
+            :propsObj="modalPropsObj"
+            mode="custom"
+            @cancel="clickCancel"
+        >
+            <div class="selectUsers-modal-wrap">
+                <!-- 左 -->
+                <div class="selectUsers-modal-wrap-left">
+                    <!-- 上 筛选 -->
+                    <div
+                        v-if="curDepartment._key !== '_highSearch'"
+                        class="search"
+                    >
+                        <dsh-input
+                            :value="searchData"
+                            :propsObj="inputPropsObj"
+                            @change="search"
+                        ></dsh-input>
+                    </div>
+
+                    <!-- 下 -->
+                    <div class="content">
+                        <!-- 左 部门 -->
+                        <department-menu
+                            class="content-menu"
+                            :canEdit="false"
+                            :list="departmentList"
+                            @departClick="changeDepartment"
+                        ></department-menu>
+
+                        <!-- 右 部门对应的成员 -->
+                        <div class="content-users">
+                            <bri-loading v-if="loading" />
+
+                            <template v-else>
+                                <!-- 有数据 -->
+                                <div
+                                    v-if="userList.length"
+                                    class="content-users-list"
+                                >
+                                    <!-- 上 全选 -->
+                                    <div
+                                        v-if="multiple"
+                                        class="content-users-list-checkAll"
+                                    >
+                                        <Checkbox
+                                            :indeterminate="false"
+                                            :value="curCheckAll"
+                                            @click.prevent.native="clickCheckAll"
+                                        >
+                                            全选
+                                        </Checkbox>
+                                    </div>
+
+                                    <!-- 下 列表-->
+                                    <div class="content-users-list-selects">
+                                        <div
+                                            v-for="userItem in userList"
+                                            :key="userItem._key"
+                                            class="content-users-list-selects-item"
+                                        >
+                                            <Checkbox
+                                                :value="isSelect(userItem._key)"
+                                                @on-change="clickSelectUserItem(userItem, ...arguments)"
+                                            >
+                                                {{ userItem.realname || userItem.mobile }}
+                                            </Checkbox>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- 无数据 -->
+                                <div
+                                    v-else
+                                    class="content-users-nodata"
+                                >
+                                    <img
+                                        :src="$imageSrcMap.nodata"
+                                        alt="该部门暂无人员"
+                                    >
+                                    <div>
+                                        该部门暂无人员
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 中 图标 -->
+                <div class="selectUsers-modal-wrap-center">
+                    <Icon
+                        class="icon"
+                        type="ios-arrow-forward"
+                    />
+                </div>
+
+                <!-- 右 已选择项 -->
+                <div class="selectUsers-modal-wrap-right">
+                    <div class="list">
+                        <span
+                            v-for="(userItem, userIndex) in newValList"
+                            :key="userIndex"
+                            class="list-item"
+                        >
+                            <span class="list-item-name">
+                                {{ userItem.realname || userItem.mobile }}
+                            </span>
+                            <Icon
+                                class="list-item-delete"
+                                type="md-close"
+                                @click="clickDeleteUserItem(userItem, userIndex, newValList)"
+                            />
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- footer -->
+            <div class="selectUsers-modal-wrap-footer">
+                <dsh-buttons
+                    :list="$getOperationList(['cancel', 'confirm'])"
+                    @click="$dispatchEvent($event)"
+                ></dsh-buttons>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../../controlMixin.js";
+    import departmentMenu from "./DepartmentMenu.vue";
+
+    export default {
+        name: "selectUsers",
+        mixins: [
+            controlMixin
+        ],
+        components: {
+            departmentMenu
+        },
+        props: {
+            showSelectUserModalOnly: Boolean
+        },
+        data () {
+            return {
+                isHover: false,
+
+                // 弹框
+                newValList: [],
+                showModal: false,
+                modalPropsObj: {
+                    title: "选择成员",
+                    showSlotClose: false,
+                    closable: true
+                },
+                // 筛选
+                searchData: {
+                    name: ""
+                },
+                inputPropsObj: {
+                    _name: "成员名称",
+                    _key: "name",
+                    _search: true,
+                    _clearable: false
+                },
+                curDepartment: {},
+                hightUsers: [
+                    {
+                        _key: "dyn_myself",
+                        realname: "当前用户"
+                    }
+                ],
+
+                loading: false,
+                userList: [],
+                departmentList: [],
+                // 分页
+                total: 0,
+                pagePropsObj: {
+                    page: 1,
+                    pagesize: 500,
+                    showSizer: false
+                },
+                isSelect (_key) {
+                    return !!this.newValList.find(newItem => newItem._key === _key);
+                },
+
+                operationMap: {
+                    cancel: {
+                        name: "取消",
+                        type: "clickCancel",
+                        btnType: "cancel",
+                        event: "clickCancel"
+                    },
+                    confirm: {
+                        name: "完成",
+                        btnType: "primary",
+                        type: "clickConfirm",
+                        event: "clickConfirm"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _multiple: false,
+                    _highSearch: false,
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+
+            multiple () {
+                return this.selfPropsObj._multiple;
+            },
+            highSearch () {
+                return this.selfPropsObj._highSearch;
+            },
+            // 审签单定制需求使用字段
+            transmit_type () {
+                return this.selfPropsObj.transmit_type;
+            },
+            current_step_sp_user_key () {
+                return this.selfPropsObj.current_step_sp_user_key;
+            },
+            stepKey () {
+                return this.selfPropsObj.stepKey;
+            },
+
+            curCheckAll () {
+                return this.userList.every(userItem => this.newValList.find(newItem => newItem._key == userItem._key));
+            },
+            showVal () {
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.curValList.map(userItem => userItem.realname || userItem.mobile).join("、");
+            }
+        },
+        created () {},
+        methods: {
+            // 外部也在使用
+            openModal () {
+                this.showModal = true;
+            },
+            closeModal () {
+                this.showModal = false;
+            },
+            init () {
+                this.searchData = {
+                    name: ""
+                };
+                this.curDepartment = {};
+                this.pagePropsObj.page = 1;
+                this.getUserList();
+                this.getDepartmentList();
+            },
+
+            search () {
+                this.pagePropsObj.page = 1;
+                this.getUserList();
+            },
+            // 选择部门
+            changeDepartment (departmentItem) {
+                this.pagePropsObj.page = 1;
+                this.curDepartment = departmentItem;
+
+                if (departmentItem._key === "_highSearch") {
+                    this.userList = this.hightUsers;
+                    this.total = 1;
+                } else {
+                    this.getUserList();
+                }
+            },
+            clickInput () {
+                if (this.finalCanEdit) {
+                    this.openModal();
+                    this.newValList = this.$deepCopy(this.curValList);
+                    this.init();
+                }
+            },
+            clickDeleteItem (deleteItem) {
+                this.curValList = this.curValList.filter(item => item._key !== deleteItem._key);
+            },
+            clickClear () {
+                this.curValList = [];
+            },
+
+            /* ---------- 弹框里 --------- */
+            clickCheckAll () {
+                if (this.curCheckAll) {
+                    this.newValList = this.newValList.filter(newItem =>
+                        !this.userList.some(userItem => newItem._key === userItem._key)
+                    );
+                } else {
+                    this.newValList = [
+                        ...this.newValList,
+                        this.userList.filter(userItem =>
+                            !this.newValList.some(newItem => newItem._key === userItem._key)
+                        )
+                    ];
+                }
+            },
+            clickSelectUserItem (curUserItem, bool) {
+                if (this.multiple) {
+                    if (this.newValList.some(newItem => newItem._key === curUserItem._key)) {
+                        this.newValList = this.newValList.filter(newItem => newItem._key !== curUserItem._key);
+                    } else {
+                        this.newValList = [...this.newValList, curUserItem];
+                    }
+                } else {
+                    this.newValList = bool === true ? [curUserItem] : [];
+                }
+            },
+            clickDeleteUserItem (item, index, list) {
+                list.splice(index, 1);
+            },
+            clickCancel () {
+                this.closeModal();
+            },
+            clickConfirm () {
+                this.closeModal();
+                this.curValList = this.newValList;
+            },
+
+            /* ----------- 接口方法 ------------- */
+            getUserList () {
+                this.loading = true;
+                this.userList = [];
+                let searchName = this.searchData.name;
+                let search = {};
+                if (searchName && searchName !== "") {
+                    search["realname"] = {
+                        "$regex": `.*${this.$speciaWord(searchName)}.*`, $options: "i"
+                    };
+                } else {
+                    delete search["realname"];
+                }
+                this.$https({
+                    url: {
+                        module: "company",
+                        name: "userIndex"
+                    },
+                    params: {
+                        search: search,
+                        department: this.curDepartment._key,
+                        transmit_type: this.transmit_type,
+                        current_step_sp_user_key: this.current_step_sp_user_key,
+                        stepKey: this.stepKey,
+                        pagination: {
+                            page: this.pagePropsObj.page,
+                            pagesize: this.pagePropsObj.pagesize
+                        }
+                    },
+                    callback: data => {
+                        this.total = data.total;
+                        this.userList = data.list;
+                        this.loading = false;
+                    }
+                });
+            },
+            getDepartmentList () {
+                this.$https({
+                    url: {
+                        module: "company",
+                        name: "compDepartCascaderAll"
+                    },
+                    params: {
+                        transmit_type: this.transmit_type,
+                        current_step_sp_user_key: this.current_step_sp_user_key,
+                        stepKey: this.stepKey,
+                        searchString: this.propsObj.searchString
+                    },
+                    callback: data => {
+                        let depart = [{
+                            is_leaf: true,
+                            level: 1,
+                            name: "全部",
+                            _key: ""
+                        }];
+                        if (this.highSearch) {
+                            depart.unshift({
+                                is_leaf: true,
+                                level: 1,
+                                name: "高级选项",
+                                _key: "_highSearch"
+                            });
+                        }
+                        this.departmentList = depart.concat(data.list);
+                    }
+                });
+            }
+        },
+        watch: {
+            showSelectUserModalOnly (nV, oV) {
+                nV && this.init();
+                nV && this.openModal();
+            }
+        },
+        filters: {
+            isActive (item, list) {
+                return list.some(o => o._key === item._key) ? "selectUsers-list-item-active" : "";
+            }
+        }
+    };
+</script>

package/src/components/list/BriCard.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="BriCard">
+        <template v-if="data.length">
+            <div
+                v-for="item in data"
+                :key="item._key"
+                class="item"
+                @click="change(item)"
+            >
+                <div :class="{
+                    'item-normal': true,
+                    'item-active': item.checked
+                }">
+                    <span class="label">{{ item.name }}</span>
+                </div>
+            </div>
+        </template>
+
+        <div
+            v-else
+            class="BriCard-nodata"
+        >
+            暂无数据……
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriCard",
+        mixins: [],
+        components: {},
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            change () {
+                this.$emit("on-change", this.value);
+            }
+        }
+    };
+</script>

package/src/components/list/BriTreeItem.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="BriTreeItem">
+        <!-- 当前节点 -->
+        <div class="BriTreeItem-content">
+            <!-- 展开icon -->
+            <div class="BriTreeItem-content-expand">
+                <i
+                    v-if="hasChildren"
+                    :class="{
+                        'BriTreeItem-content-expand-icon': true,
+                        'ivu-icon': true,
+                        'ivu-icon-ios-arrow-down': expand,
+                        'ivu-icon-ios-arrow-forward': !expand
+                    }"
+                    @click="toggleExpand"
+                ></i>
+            </div>
+
+            <!-- 有选择框 意味着该节点可以选择 -->
+            <Checkbox
+                v-if="changeOnSelect || !hasChildren"
+                :class="{
+                    'BriTreeItem-content-select': true,
+                    'BriTreeItem-content-select-radio': !multiple
+                }"
+                v-model="value.checked"
+                @on-change="onChange(value)"
+            >
+                {{ value.title || value.name }}
+            </Checkbox>
+            <!-- 无选择框 -->
+            <span
+                v-else
+                class="BriTreeItem-content-text"
+            >
+                {{ value.title || value.name }}
+            </span>
+        </div>
+
+        <!-- 当前节点 的子节点列表 -->
+        <transition
+            name="default"
+            enter-class="default-enter"
+            leave-to-class="default-leave-to"
+        >
+            <div
+                v-if="showChildren"
+                class="BriTreeItem-children"
+            >
+                <yc-tree-item
+                    v-for="item in value.children"
+                    :key="item._key"
+                    :value="item"
+                    :changeOnSelect="changeOnSelect"
+                    :multiple="multiple"
+                    @on-change="onChange"
+                ></yc-tree-item>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BriTreeItem",
+        props: {
+            value: {
+                type: Object,
+                default: () => ({})
+            },
+
+            changeOnSelect: {
+                type: Boolean,
+                default: true
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                expand: false
+            };
+        },
+        computed: {
+            hasChildren () {
+                return this.value.children && this.value.children.length;
+            },
+            showChildren () {
+                return this.expand && this.hasChildren;
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.expand = this.value.expand;
+            },
+
+            toggleExpand () {
+                this.expand = !this.expand;
+            },
+            onChange (item) {
+                this.$emit("on-change", item);
+            }
+        }
+    };
+</script>