bri-components 1.1.6 → 1.2.1

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/controls/special/DshUndeveloped.vue

@@ -33,9 +33,3 @@
         methods: {}
     };
 </script>
-
-<style lang="less">
-    .DshUndeveloped {
-        width: 100%;
-    }
-</style>

package/src/components/form/DshForm.vue

@@ -148,7 +148,10 @@
         data () {
             return {
                 rules: {},
-                forceValidateTypes: ["select", "cascader", "regions", "cascaders", "file", "coordinates", "editor", "users", "departments", "labels", "flatTable", "reference", "referenceBy"],
+                forceValidateTypes: [
+                    "select", "cascader", "regions", "cascaders", "file", "coordinates", "editor",
+                    "users", "departments", "labels", "flatTable", "reference", "referenceBy"
+                ],
                 ignoreProperties: [
                     "_name", "_key", "_default", "_required", "_span", "_br", "_line", "_noLabel", "_clearable",
                     "_disabledBtns", "_disabledOldDataRow"
@@ -319,19 +322,3 @@
         }
     };
 </script>
-
-<style lang="less">
-    .DshForm {
-        &-item-FormItem {
-            margin-bottom: 0px!important;
-        }
-
-        .ivu-form-item-content {
-            line-height: normal;
-        }
-        .ivu-form-item-error-tip {
-            top: 90%;
-            left: 15px;
-        }
-    }
-</style>

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/BriTable.vue

@@ -34,7 +34,7 @@
         ></ve-table>
 
         <!-- loading -->
-        <ZLoading v-if="isLoading" />
+        <bri-loading v-if="isLoading" />
         <!-- empty -->
         <div
             v-else-if="!data.length"

package/src/components/list/{ZTree.vue → BriTree.vue}

@@ -1,14 +1,14 @@
 <template>
-    <div class="ZTree">
-        <div class="ZTree-action">
+    <div class="BriTree">
+        <div class="BriTree-action">
             <dsh-buttons
-                class="ZTree-action-create"
+                class="BriTree-action-create"
                 :list="$getOperationList(['createNode'])"
                 @click="$dispatchEvent($event)"
             ></dsh-buttons>
         </div>
 
-        <div class="ZTree-tree">
+        <div class="BriTree-tree">
             <Tree
                 :data="treeData"
                 :render="renderContent"
@@ -17,11 +17,12 @@
 
         <!-- 添加节点弹窗 -->
         <dsh-modal
+            class="BriTree-modal"
             v-model="treeFormShow"
             :propsObj="treeFormPropsObj"
             mode="custom"
         >
-            <div class="ZTree-create-content">
+            <div class="BriTree-modal-content">
                 <dsh-form
                     v-if="treeFormShow"
                     ref="treeForm"
@@ -31,7 +32,7 @@
                 ></dsh-form>
 
                 <dsh-buttons
-                    class="textRight dsh-padding20"
+                    class="BriTree-modal-content-btns"
                     :list="$getOperationList(['clickNodeCancel', 'clickNodeConfirm'])"
                     @click="$dispatchEvent($event, { data: treeFormData })"
                 ></dsh-buttons>
@@ -53,7 +54,7 @@
         });
     };
     export default {
-        name: "ZTree",
+        name: "BriTree",
         props: {
             data: Array,
             // 树形级联类别：cascader dropdown
@@ -358,7 +359,7 @@
                                     icon: "md-arrow-dropdown-circle",
                                     color: this.colorMap[data.color] || this.colorMap["color-1"]
                                 },
-                                menuClass: "ZTree-dropdown-menu",
+                                menuClass: "BriTree-dropdown-menu",
                                 list: this.colorArr
                             },
                             style: {