bri-components 1.2.57 → 1.2.59

package/src/components/controls/{controlMixin.js → mixins/controlMixin.js}

@@ -47,7 +47,11 @@ export default {
             },
             set (val) {
                 this.value[this.controlKey] = val;
-                // this.change();
+                // 修复文本框clear后值为undefined，后端无法更新保存数据bug
+                if (["select"].includes(this.controlType) && this.value[this.controlKey] === undefined) {
+                    this.value[this.controlKey] = "";
+                }
+                this.change();
             }
         },
         // 值为[]类型用的
@@ -122,6 +126,9 @@ export default {
         isFullRow () {
             return this.propsObj._span === 24 || !this.propsObj._span;
         },
+        clearable () {
+            return this.commonDealPropsObj._clearable;
+        },
         // showAlign () {
         //     return !this.isUnitShow
         //         ? "flex-start"
@@ -133,12 +140,17 @@ export default {
         // },
 
         /* 部分条件下 才使用的属性 */
+        // isShare () {
+        //     return !!this.propsObj.isShare;
+        // },
         isInTable () {
             return !!this.propsObj.isInTable;
         },
+        // 高级搜索状态
         isOnSearch () {
             return !!this.propsObj.onSearch;
         },
+        // 默认搜索状态
         isOnDftSearch () {
             return !!this.propsObj.onDftSearch;
         },
@@ -148,9 +160,12 @@ export default {
         isUnitShow () {
             return this.isInTable && !this.canEdit;
         },
-        // isShare () {
-        //     return !!this.propsObj.isShare;
-        // },
+        isDetailUpdate () {
+            return !this.isInTable && !!this.canEdit;
+        },
+        isDetailShow () {
+            return !this.isInTable && !this.canEdit;
+        },
 
         /* 部分控件下 才使用的属性 */
         compKey () {
@@ -188,6 +203,12 @@ export default {
             this.$emit("refChange", this.value[this.controlKey]);
         },
 
+        // 点击输入框
+        clickInput () {
+            if (!this.selfPropsObj._disabled) {
+                this.openModal();
+            }
+        },
         /* ----- 工具方法 ------- */
         // 切换弹框
         toggleModal (bool) {

package/src/components/controls/mixins/selectMixin.js

@@ -0,0 +1,192 @@
+import controlMixin from "./controlMixin.js";
+import { resourceData } from "bri-datas";
+
+export default {
+    mixins: [
+        controlMixin
+    ],
+    components: {},
+    props: {},
+    data () {
+        return {
+            initListData: []
+        };
+    },
+    computed: {
+        basePropsObj () {
+            return {
+                colorMap: resourceData.colorMap,
+                _optionKind: "dropdown", // "flat"、"dropdown"
+                _useColor: false,
+                _filterable: true,
+                _data: [],
+                _customData: [],
+
+                ...this.propsObj,
+                ...this.commonDealPropsObj
+            };
+        },
+        showType () {
+            return this.selfPropsObj._optionKind;
+        },
+        useColor () {
+            return this.selfPropsObj._useColor;
+        },
+        colorMap () {
+            return this.selfPropsObj.colorMap;
+        },
+        listData () {
+            const listData = this.selfPropsObj._data.concat(this.initListData);
+
+            return this.$dataType(this.selfPropsObj._filterFunc, "function")
+                ? this.selfPropsObj._filterFunc(listData, this.selfPropsObj, this.value)
+                : listData;
+        },
+
+        curValObj () {
+            return this.getItemObj(this.curVal);
+        },
+        valStr: {
+            get () {
+                return this.curValObj
+                    ? this.curValObj.name || this.curValObj._name
+                    : "";
+            },
+            set (val) {
+                if (!val) {
+                    this.curVal = "";
+                }
+            }
+        },
+        showVal () {
+            return this.$isEmptyData(this.curVal)
+                ? this.emptyShowVal
+                : this.valStr;
+        },
+        // 已选择项的对象列表
+        curValObjList () {
+            return this.curValList.map(key => this.getItemObj(key));
+        },
+        valListStr () {
+            return this.curValObjList.map(item => item.name || item._name).join("、");
+        },
+        showMulVal () {
+            return this.$isEmptyData(this.curValList)
+                ? this.emptyShowVal
+                : this.valListStr;
+        }
+    },
+    created () {
+        this.init();
+    },
+    methods: {
+        init () {
+            this.getListData();
+        },
+
+        // 单选模式 点击选项
+        clickRadioItem (item, index) {
+            if (!this.getRadioItemDisabled(item)) {
+                if (this.curVal === item._key) {
+                    if (this.clearable) {
+                        this.curVal = "";
+                    }
+                } else {
+                    this.curVal = item._key;
+                }
+            }
+        },
+        // 多选模式 点击选项
+        clickCheckItem (item, index) {
+            if (!this.getCheckItemDisabled(item)) {
+                if (this.curValList.includes(item._key)) {
+                    this.curValList = this.curValList.filter(key => key !== item._key);
+                } else {
+                    this.curValList = [...this.curValList, item._key];
+                }
+            }
+        },
+
+        /* ------- 方法 ------- */
+        getItemClass (item) {
+            return [
+                this.useColor
+                    ? this.colorMap[item.color] ? item.color : "color-1"
+                    : undefined,
+                item.class
+            ];
+        },
+        getItemColorStyle (item) {
+            const color = this.colorMap[item.color] || this.colorMap["color-1"];
+            return this.useColor
+                ? {
+                    backgroundColor: this.$getColor(color, 0.1),
+                    color: color
+                }
+                : {};
+        },
+        getItemShowStyle (item) {
+            return {
+                ...this.getItemColorStyle(item),
+                display: "inline-block",
+                "max-width": "100%",
+                padding: "0px 6px",
+                "border-radius": "4px"
+            };
+        },
+        // 获取单选项的置灰状态
+        getRadioItemDisabled (item) {
+            return !!(
+                this.selfPropsObj._disabled ||
+                item._disabled
+            );
+        },
+        // 获取多选项的置灰状态
+        getCheckItemDisabled (item) {
+            return !!(
+                this.selfPropsObj._disabled ||
+                item._disabled ||
+                (this.curValList.length >= this.selfPropsObj._max && !this.getCheckItemStatus(item))
+            );
+        },
+        // 获取多选项的选中状态
+        getCheckItemStatus (item) {
+            return this.curValList.includes(item._key);
+        },
+        getItemObj (key) {
+            const obj = this.listData.find(item => item._key === key) || {
+                _key: key,
+                name: `温馨提示：选项${key}已找不到`
+            };
+
+            return this.$isEmptyData(key)
+                ? undefined
+                : {
+                    ...obj,
+                    style: this.getItemShowStyle(obj),
+                    color: undefined
+            };
+        },
+
+        // TODO：待删除 接口 -获取自定义的接口数据
+        getListData () {
+            this.selfPropsObj._customData.forEach(item => {
+                this.$https({
+                    url: item.url,
+                    params: item.params,
+                    callback: data => {
+                        this.initListData = [
+                            ...this.initListData,
+                            ...data.list.map(dataItem =>
+                                ({
+                                    _key: dataItem._key,
+                                    name: dataItem.name
+                                })
+                            )
+                        ];
+                    }
+                });
+            });
+        }
+    }
+};

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

@@ -117,7 +117,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
 
     export default {
         name: "BriLabels",

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

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
 
     export default {
         name: "DshPackage",

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

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
     import DshBtnModal from "../../small/DshBtnModal.vue";
     import DshCascaderTable from "../../list/DshCascaderTable.vue";
 

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

@@ -88,7 +88,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
     import DshBtnModal from "../../small/DshBtnModal.vue";
     import BriFlatTable from "../../list/BriFlatTable.vue";
     import flatTableImportModal from "./flatTableImportModal.vue";

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

@@ -121,7 +121,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
     import BriTreeItem from "../../list/BriTreeItem.vue";
     import BriCard from "../../list/BriCard.vue";
 

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

@@ -200,7 +200,7 @@
 </template>
 
 <script>
-    import controlMixin from "../../controlMixin.js";
+    import controlMixin from "../../mixins/controlMixin.js";
     import departMenu from "./departMenu.vue";
 
     export default {

package/src/components/controls/special/DshBack.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
 
     export default {
         name: "DshBack",

package/src/components/controls/special/DshUndeveloped.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-    import controlMixin from "../controlMixin.js";
+    import controlMixin from "../mixins/controlMixin.js";
 
     export default {
         name: "DshUndeveloped",

package/src/components/form/DshAdvSearch.vue

@@ -422,7 +422,7 @@
                 }
 
                 &-control {
-                    .dsh-margin-bottom5();
+                    margin-bottom: 5px;
                 }
 
                 &-blank {

package/src/components/list/DshBox/DshCard.vue

@@ -1,21 +1,16 @@
 <template>
     <div class="DshCard">
-        <!-- 无数据 -->
-        <div
-            v-if="!data.length"
-            class="dsh-tip"
-        >{{noDataText}}</div>
-
         <!-- 有数据 -->
-        <template v-else>
+        <template v-if="data.length">
             <div
-                class="DshCard-item"
                 v-for="(dataItem, dataIndex) in data"
                 :key="dataIndex"
+                class="DshCard-item"
                 @click="clickRow(dataItem)"
             >
                 <!-- 下拉操作（定位css） -->
                 <dsh-dropdown
+                    v-if="operationList.length"
                     class="DshCard-item-dropdown"
                     :dropdownObj="dropdownObj"
                     :list="operationList"
@@ -34,36 +29,41 @@
                 <!-- 内容 -->
                 <div class="DshCard-item-info">
                     <!-- 标题 -->
-                    <div class="DshCard-item-info-title dsh-ellipsis">
-                        <bri-tooltip
-                            placement="top"
-                            :transfer="true"
-                            :content="dataItem[propsObj.titleField]"
-                        >
-                            <div class="dsh-ellipsis">{{ dataItem[propsObj.titleField] }}</div>
-                        </bri-tooltip>
-                    </div>
+                    <bri-tooltip
+                        class="title"
+                        :content="dataItem[propsObj.titleField]"
+                        placement="top"
+                        :transfer="true"
+                    >
+                        <div class="title-name">
+                            {{ dataItem[propsObj.titleField] }}
+                        </div>
+                    </bri-tooltip>
 
                     <!-- 显示字段 -->
                     <div
-                        class="DshCard-item-info-col unit"
                         v-for="colItem in selfColumns"
                         :key="colItem._key"
+                        class="unit"
                     >
                         <!-- 左 label -->
-                        <bri-tooltip
-                            class="unit-label"
-                            placement="top"
-                            :transfer="true"
-                            maxWidth="200"
-                            :content="colItem._name"
-                        >
-                            <span class="dsh-ellipsis">{{ colItem._name }}</span>
-                        </bri-tooltip>
-                        <span class="unit-colon">：</span>
+                        <div class="unit-label">
+                            <bri-tooltip
+                                class="unit-label-tooltip"
+                                :content="colItem._name"
+                                :transfer="true"
+                            >
+                                <span class="unit-label-name">
+                                    {{ colItem._name }}
+                                </span>
+                                <span class="unit-label-colon">
+                                    ：
+                                </span>
+                            </bri-tooltip>
+                        </div>
 
                         <!-- 右 val -->
-                        <div class="unit-value dsh-ellipsis">
+                        <div class="unit-control">
                             <dsh-list-render
                                 v-if="colItem.renderBodyCell"
                                 :row="dataItem"
@@ -79,13 +79,23 @@
 
                             <span
                                 v-else
-                                class="unit-value-text"
-                            >{{ dataItem[colItem._key] }}</span>
+                                class="unit-control-text"
+                            >
+                                {{ dataItem[colItem._key] }}
+                            </span>
                         </div>
                     </div>
                 </div>
             </div>
         </template>
+
+        <!-- 无数据 -->
+        <div
+            v-else
+            class="dsh-tip"
+        >
+            {{ noDataText }}
+        </div>
     </div>
 </template>
 
@@ -132,24 +142,41 @@
                     color: "#E9ECF4",
                     showDropdownItemIcon: false
                 },
-                defaultImgObj: {
-                    url: this.$imageSrcMap.app.projectCard
-                },
 
                 getCardBgImgSrc (dataItem) {
                     const fileList = dataItem[this.propsObj.imageField] || [];
-                    const imgObj = fileList.find(fileItem => fileItem.mimetype.includes("image")) || this.defaultImgObj;
+                    const imgObj = fileList.find(fileItem => fileItem.mimetype.includes("image")) || {
+                        url: this.$imageSrcMap.app.projectCard
+                    };
                     return imgObj.url;
                 }
             };
         },
         computed: {
+            imageField () {
+                return this.propsObj.imageField;
+            },
+            // imageFieldObj () {
+            //     return this.columns.find(colItem => colItem._key === this.imageField) || {};
+            // },
+            titleField () {
+                return this.propsObj.titleField;
+            },
+            // titleFieldObj () {
+            //     return this.columns.find(colItem => colItem._key === this.titleField) || {};
+            // },
             selfColumns () {
-                return this.columns.slice(0, 2);
+                return this.columns
+                    .filter(colItem => ![this.imageField, this.titleField].includes(colItem._key))
+                    .map(colItem => ({
+                        ...colItem,
+                        titleAlign: "left",
+                        columnAlign: "left"
+                    }))
+                    .slice(0, 2);
             }
         },
-        created () {
-        },
+        created () {},
         methods: {
             // 点击某行
             clickRow (row) {
@@ -158,3 +185,91 @@
         }
     };
 </script>
+
+<style lang="less">
+    .DshCard {
+        padding: 0 40px;
+        background-color: #ffffff;
+        display: flex;
+        flex-wrap: wrap;
+
+        &-item {
+            box-sizing: border-box;
+            width: 250px;
+            height: 210px;
+            margin: 10px 16px 30px;
+            border-radius: 6px;
+            box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
+            cursor: pointer;
+            overflow: hidden;
+            position: relative;
+
+            display: flex;
+            flex-direction: column;
+
+            &-dropdown {
+                position: absolute;
+                top: 5px;
+                right: 5px;
+            }
+
+            &-image {
+                height: 122px;
+                padding-top: 20px;
+
+                img {
+                    width: 100%;
+                }
+            }
+
+            &-info {
+                padding: 8px 15px;
+                background: #F7FBFF;
+                overflow: hidden;
+
+                .title {
+                    height: 24px;
+                    padding-right: 6px;
+                    font-size: 14px;
+                    font-weight: 600;
+
+                    &-name {
+                        .dsh-ellipsis();
+                    }
+                }
+
+                .unit {
+                    height: 24px;
+                    display: flex;
+                    flex-direction: row;
+
+                    &-label {
+                        font-weight: 400;
+                        color: #515A6E;
+
+                        &-name {
+                            min-width: 70px;
+                            max-width: 70px;
+                            .dsh-ellipsis();
+                            display: inline-block;
+                        }
+
+                        &-colon {
+
+                        }
+                    }
+
+                    &-control {
+                        flex: 1;
+                        min-width: 0px;
+                        overflow: hidden;
+
+                        &-text {
+
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>