bri-components 1.2.0 → 1.2.1

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

@@ -0,0 +1,380 @@
+<template>
+    <div class="selectDepartments">
+        <bri-tooltip
+            :content="showVal"
+            placement="top"
+            maxWidth="200"
+            :transfer="true"
+        >
+            <!-- 编辑模式 -->
+            <div
+                v-if="canEdit"
+                :class="{
+                    ...commonClass,
+                    'selectDepartments-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,
+                    'selectDepartments-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"
+            v-model="showModal"
+            mode="custom"
+            :propsObj="modalPropsObj"
+            @cancel="clickCancel"
+        >
+            <div class="selectDepartments-list">
+                <!-- 上 已选择项 -->
+                <div class="list-selected">
+                    <span class="list-selected-label">
+                        已选择{{ multiple ?  `(${newValList.length}个)` : "" }}：
+                    </span>
+
+                    <span
+                        v-for="(selectItem, selectIndex) in newValList"
+                        :key="selectIndex"
+                        class="item"
+                    >
+                        <span class="item-name">
+                            {{ selectItem.full_name || selectItem.name }}
+                        </span>
+                        <Icon
+                            class="item-delete"
+                            type="md-close"
+                            @click="deleteSelect(selectItem, selectIndex, newValList)"
+                        />
+                    </span>
+                </div>
+
+                <!-- 上 搜索框 -->
+                <div class="list-search">
+                    <Input
+                        v-model="searchName"
+                        placeholder="搜索部门"
+                        search
+                        @on-search="search"
+                    />
+                </div>
+
+                <!-- 中 列表 -->
+                <div
+                    v-if="showModal"
+                    class="list-center"
+                >
+                    <bri-loading v-if="loading" />
+
+                    <template v-else>
+                        <!-- 树形形式 -->
+                        <div
+                            v-if="isCascader"
+                            class="list-center-tree"
+                        >
+                            <template v-if="allDepartmentList.length">
+                                <bri-tree-item
+                                    v-for="item in allDepartmentList"
+                                    :key="item._key"
+                                    :value="item"
+                                    :changeOnSelect="changeOnSelect"
+                                    :multiple="multiple"
+                                    @on-change="changeSelect"
+                                ></bri-tree-item>
+                            </template>
+                            <div
+                                v-else
+                                class="tree-nodata"
+                            >
+                                暂无数据……
+                            </div>
+                        </div>
+
+                        <!-- 卡片形式 -->
+                        <div
+                            v-else
+                            class="list-center-card"
+                        >
+                            <bri-card
+                                :data="departmentList"
+                                :changeOnSelect="changeOnSelect"
+                                :multiple="multiple"
+                                @on-change="changeSelect"
+                            ></bri-card>
+
+                            <div
+                                v-if="highSearch"
+                                class="card-high"
+                            >
+                                <p class="card-high-title">高级选项</p>
+                                <bri-card
+                                    :data="highDepartmentList"
+                                    :changeOnSelect="changeOnSelect"
+                                    :multiple="multiple"
+                                    @on-change="changeSelect"
+                                ></bri-card>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+
+                <!-- 底 按钮 -->
+                <div class="list-footer">
+                    <dsh-buttons
+                        :list="$getOperationList(['canCancel', 'canConfirm'])"
+                        @click="$dispatchEvent($event)"
+                    ></dsh-buttons>
+                </div>
+            </div>
+        </dsh-modal>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../controlMixin.js";
+    import BriTreeItem from "../../list/BriTreeItem.vue";
+    import BriCard from "../../list/BriCard.vue";
+
+    export default {
+        name: "selectDepartments",
+        mixins: [
+            controlMixin
+        ],
+        components: {
+            BriTreeItem,
+            BriCard
+        },
+        props: {},
+        data () {
+            return {
+                isHover: false,
+
+                newValList: [],
+                showModal: false,
+                loading: false,
+                searchName: "", // 搜索名字
+                departmentList: [],
+                highDepartmentList: [
+                    {
+                        _key: "dyn_department",
+                        name: "当前部门"
+                    }
+                ],
+
+                operationMap: {
+                    canCancel: {
+                        name: "取消",
+                        type: "canCancel",
+                        btnType: "cancel",
+                        event: "clickCancel"
+                    },
+                    canConfirm: {
+                        name: "确定",
+                        type: "canConfirm",
+                        btnType: "primary",
+                        event: "clickConfirm"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _multiple: false,
+                    _highSearch: false,
+                    _isCascader: true,
+                    _changeOnSelect: true,
+                    _searchString: "",
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            multiple () {
+                return this.selfPropsObj._multiple;
+            },
+            highSearch () {
+                return this.selfPropsObj._highSearch;
+            },
+            // 暂时没配置
+            isCascader () {
+                return this.selfPropsObj._isCascader;
+            },
+            changeOnSelect () {
+                return this.selfPropsObj._changeOnSelect;
+            },
+            searchString () {
+                return this.selfPropsObj._searchString;
+            },
+
+            modalPropsObj () {
+                return {
+                    title: "选择部门",
+                    class: `z-modal ${this.isCascader ? "selectDepartments-cascaderModal" : "selectDepartments-modal"}`,
+                    showSlotClose: false,
+                    closable: true
+                };
+            },
+            selectKeys () {
+                return this.newValList.map(item => item._key);
+            },
+            allDepartmentList () {
+                return this.transformDepartmentList([
+                    ...(this.highSearch ? this.highDepartmentList : []),
+                    ...this.departmentList
+                ], this.selectKeys);
+            },
+
+            showVal () {
+                return this.$isEmptyData(this.curValList)
+                    ? this.emptyShowVal
+                    : this.curValList.map(depart => depart.full_name || depart.name).join("、");
+            }
+        },
+        created () {},
+        methods: {
+            // 外部也在使用
+            openModal () {
+                this.showModal = true;
+            },
+            closeModal () {
+                this.showModal = false;
+            },
+
+            // 搜索
+            search () {
+                this.getListData();
+            },
+            // 点击输入框 打开选择模态框
+            clickInput () {
+                if (this.finalCanEdit) {
+                    this.openModal();
+
+                    this.newValList = this.$deepCopy(this.curValList);
+                    this.searchName = "";
+                    this.getListData();
+                }
+            },
+            clickDeleteItem (deleteItem) {
+                this.curValList = this.curValList.filter(item => item._key != deleteItem._key);
+            },
+            // 点击清除选择项
+            clickClear () {
+                this.curValList = [];
+            },
+
+            /* ---------- 弹框里 --------- */
+            // 弹窗 -选项变化
+            changeSelect (selectItem) {
+                this.newValList = this.multiple
+                    ? this.selectKeys.includes(selectItem._key)
+                        ? this.newValList.filter(item => item._key !== selectItem._key)
+                        : [...this.newValList, selectItem]
+                    : selectItem.checked
+                        ? [selectItem]
+                        : [];
+            },
+            // 弹窗 -删除选择项
+            deleteSelect (item, index, list) {
+                list.splice(index, 1);
+            },
+            // 弹框 -点击取消
+            clickCancel () {
+                this.closeModal();
+            },
+            // 弹框 -点击确认选择
+            clickConfirm () {
+                this.closeModal();
+
+                this.curValList = this.newValList;
+            },
+
+            /* ----------- 接口方法和加工方法 --------- */
+            // 处理数据
+            transformDepartmentList (data = [], selectKeys = []) {
+                return data.map(item => ({
+                    ...item,
+                    title: item.name,
+                    checked: selectKeys.includes(item._key),
+                    expand: !!(item.children && item.children.length && item.level < 2),
+                    children: this.transformDepartmentList(item.children, selectKeys)
+                }));
+            },
+            // 接口 -获取部门列表数据
+            getListData () {
+                this.loading = true;
+                this.$https({
+                    url: {
+                        module: "company",
+                        name: this.isCascader ? "compDepartCascaderAll" : "compDepartIndex"
+                    },
+                    params: {
+                        search: this.searchName
+                            ? {
+                                name: {
+                                    "$regex": `.*${this.$speciaWord(this.searchName)}.*`, $options: "i"
+                                }
+                            }
+                            : undefined,
+                        searchString: this.searchString,
+                        nameSearchFlag: !this.changeOnSelect // 以整个链的数据返回匹配到的部门
+                    },
+                    callback: data => {
+                        this.loading = false;
+                        this.departmentList = data.list;
+                    }
+                });
+            }
+        }
+    };
+</script>

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

@@ -0,0 +1,191 @@
+<template>
+    <div class="DepartmentMenu">
+        <div
+            v-if="!parent && canEdit"
+            :class="{
+                'DepartmentMenu-item': true,
+                'DepartmentMenu-item-select': departSelected._key === 'noDepart' || departSelected === null
+            }"
+        >
+            <div
+                :class="{
+                    'DepartmentMenu-item-name': true,
+                    'DepartmentMenu-item-name-select': departSelected._key === 'noDepart' || departSelected === null
+                }"
+                @click="departClick({'_key': 'noDepart'})"
+            >
+                无部门员工
+            </div>
+        </div>
+
+        <div
+            v-for="(depart, departIndex) in list"
+            :key="depart._key"
+            :class="{
+                'DepartmentMenu-item': true,
+                'DepartmentMenu-item-select': departSelected._key ===  depart._key
+            }"
+        >
+            <div
+                :class="{
+                    'DepartmentMenu-item-name': true,
+                    'DepartmentMenu-item-name-select': departSelected._key === depart._key
+                }"
+                @click.stop="departClick(depart)"
+            >
+                <span>
+                    <Icon
+                        v-if="depart.children && depart.children.length"
+                        :type="iconType(depart)"
+                        @click.stop="toggleChildren(depart)"
+                    />
+                    <span class="DepartmentMenu-item-name-text">
+                        {{ depart.name }}
+                    </span>
+                </span>
+
+                <dsh-dropdown
+                    v-if="canEdit"
+                    trigger="hover"
+                    :list="dropdownList"
+                    @click="$dispatchEvent($event, undefined, depart, departIndex, parent)"
+                ></dsh-dropdown>
+            </div>
+
+            <template v-if="depart.isShowChildren">
+                <department-menu
+                    :list="depart.children"
+                    style="margin-left:15px"
+                    :parent="depart"
+                    :propSelect="departSelected"
+                    :canEdit="canEdit"
+                    @showAddModal="showAddModal"
+                    @showChange="showChilrenChange"
+                    @deleteDepart="deleteDepart"
+                    @departClick="departClick"
+                    @removeDepartment="removeDepartment"
+                ></department-menu>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DepartmentMenu",
+        props: {
+            canEdit: {
+                type: Boolean,
+                default: false
+            },
+            parent: Object,
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propSelect: {
+                type: Object,
+                default: () => {
+                    return {_key: "noDepart"};
+                }
+            }
+        },
+        data () {
+            return {
+                deleteModal: true,
+                dropdownList: [
+                    {
+                        name: "添加下级部门",
+                        type: "addSub",
+                        event: "addSubDepartment",
+                        icon: "ios-add-circle-outline"
+                    },
+                    {
+                        name: "修改部门信息",
+                        type: "change",
+                        event: "showChange",
+                        icon: "ios-create-outline"
+                    },
+                    {
+                        name: "删除部门",
+                        type: "delete",
+                        event: "tipDelete",
+                        icon: "ios-trash-outline"
+                    },
+                    {
+                        name: "移动部门",
+                        type: "remove",
+                        event: "removeDepartment",
+                        icon: "ios-move"
+                    }
+                ]
+            };
+        },
+        computed: {
+            iconType () {
+                return function (depart) {
+                    return depart.isShowChildren ? "ios-arrow-down" : "ios-arrow-forward";
+                };
+            },
+            departSelected: {
+                get () {
+                    return this.propSelect;
+                },
+                set (val) {
+                    this.propSelect._key = val._key;
+                }
+            }
+        },
+        created () {
+        },
+        methods: {
+            addSubDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("showAddModal", current);
+            },
+            addPeerDepartment () {
+                this.$emit("showAddModal", this.parent);
+            },
+            departClick (department) {
+                this.departSelected = department;
+                this.$emit("departClick", department);
+            },
+            toggleChildren (depart) {
+                depart.isShowChildren = !depart.isShowChildren;
+                this.$forceUpdate();
+            },
+            showAddModal (parent) {
+                this.$emit("showAddModal", parent);
+            },
+            deleteDepart (current) {
+                this.departSelected = {_key: "noDepart"};
+                this.$emit("deleteDepart", current);
+            },
+            // 提示删除
+            tipDelete (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$Modal.confirm({
+                    title: "警告",
+                    content: "确定要删除该部门吗？",
+                    onOk: () => {
+                        this.deleteDepart(current);
+                    },
+                    onCancel: () => {
+                        this.$Message.info("已取消！");
+                    }
+                });
+            },
+            // 修改部门
+            showChange (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("showChange", current);
+            },
+            showChilrenChange (depart) {
+                this.$emit("showChange", depart);
+            },
+            // 移动部门
+            removeDepartment (dropdownItem, dropdownIndex, current, currentUserIndex, parent) {
+                this.$emit("removeDepartment", dropdownItem, dropdownIndex, current, currentUserIndex, parent);
+            }
+        }
+    };
+</script>