bri-components 1.3.11 → 1.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.3.11",
+    "version": "1.3.13",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

package/src/components/controls/base/DshNumber/BriInputNumber/BriInputNumber.vue

@@ -9,6 +9,7 @@
             style="display:flex"
         >
             <input
+                style="flex: 1; min-width: 0px;"
                 :id="elementId"
                 :class="inputClasses"
                 :disabled="itemDisabled"

package/src/components/controls/base/DshNumber/DshNumber.vue

@@ -156,6 +156,7 @@
         &-edit {
             &-suffix {
                 min-width: 32px;
+                padding: 0px 6px;
                 border-left: 1px solid @borderColor;
                 background-color: #F0F0F0;
                 text-align: center;

package/src/components/controls/base/DshSelect/DshCheckbox.vue

@@ -22,14 +22,14 @@
                 >
                     <Checkbox
                         v-for="(item, index) in listData"
-                        :key="item._key"
+                        :key="item[saveKey]"
                         :class="getItemClass(item)"
                         :style="getItemColorStyle(item)"
-                        :label="item._key"
+                        :label="item[saveKey]"
                         :disabled="getCheckItemDisabled(item, index)"
                         :border="useColor"
                     >
-                        <span>{{ item.name || item._name }}</span>
+                        <span>{{ item[nameKey] || item.name || item._name }}</span>
                     </Checkbox>
                 </CheckboxGroup>
             </template>
@@ -61,16 +61,16 @@
             >
                 <Option
                     v-for="(item, index) in listData"
-                    :key="item._key"
-                    :value="item._key"
-                    :label="item.name || item._name"
+                    :key="item[saveKey]"
+                    :value="item[saveKey]"
+                    :label="item[nameKey] || item.name || item._name"
                     :disabled="getCheckItemDisabled(item, index)"
                 >
                     <Checkbox :value="getItemCheckStatus(item)"></Checkbox>
 
                     <slot :item="item"></slot>
 
-                    <span>{{ item.name || item._name }}</span>
+                    <span>{{ item[nameKey] || item.name || item._name }}</span>
                 </Option>
             </Select>
         </template>
@@ -150,7 +150,7 @@
             changeCheckValue (item) {
                 this.clickCheckItem({
                     ...item,
-                    _key: item.value
+                    [this.saveKey]: item.value
                 });
             }
         }

package/src/components/controls/base/DshSelect/DshSelect.vue

@@ -23,16 +23,16 @@
                 >
                     <Radio
                         v-for="(item, index) in listData"
-                        :key="item._key"
+                        :key="item[saveKey]"
                         :class="getItemClass(item)"
                         :style="getItemColorStyle(item)"
-                        :value="curVal === item._key"
-                        :label="item._key"
+                        :value="curVal === item[saveKey]"
+                        :label="item[saveKey]"
                         :disabled="getRadioItemDisabled(item, index)"
                         :border="useColor"
                         @click.native.stop="cancelRadioItemSelect(item, index)"
                     >
-                        <span @click.stop="0">{{ item.name || item._name }}</span>
+                        <span @click.stop="0">{{ item[nameKey] || item.name || item._name }}</span>
                     </Radio>
                 </RadioGroup>
             </template>
@@ -61,9 +61,9 @@
                 <!-- </Option>必须和输出内容在一行，否则出现空格导致_filterable出bug -->
                 <Option
                     v-for="(item, index) in listData"
-                    :key="item._key"
-                    :value="item._key"
-                    :label="item.name || item._name"
+                    :key="item[saveKey]"
+                    :value="item[saveKey]"
+                    :label="item[nameKey] || item.name || item._name"
                     :disabled="getRadioItemDisabled(item, index)"
                 >
                     <Icon
@@ -76,7 +76,7 @@
 
                     <slot :item="item"></slot>
 
-                    <span>{{ item.name || item._name }}</span>
+                    <span>{{ item[nameKey] || item.name || item._name }}</span>
                 </Option>
             </Select>
         </template>

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

@@ -15,6 +15,8 @@ export default {
     computed: {
         basePropsObj () {
             return {
+                _saveKey: "_key",
+                _nameKey: "name",
                 _optionKind: "dropdown", // "flat"、"dropdown"
                 colorMap: resourceData.colorMap,
                 _useColor: false,
@@ -28,6 +30,12 @@ export default {
                 ...this.commonDealPropsObj
             };
         },
+        saveKey () {
+            return this.selfPropsObj._saveKey;
+        },
+        nameKey () {
+            return this.selfPropsObj._nameKey;
+        },
         showType () {
             return this.selfPropsObj._optionKind;
         },
@@ -49,8 +57,8 @@ export default {
             if (this.selectFilterVals.length) {
                 listData = listData.filter(item =>
                     this.reverseFilter
-                        ? !this.selectFilterVals.includes(item._key)
-                        : this.selectFilterVals.includes(item._key)
+                        ? !this.selectFilterVals.includes(item[this.saveKey])
+                        : this.selectFilterVals.includes(item[this.saveKey])
                 );
             }
 
@@ -64,7 +72,7 @@ export default {
         curValName: {
             get () {
                 return this.curValObj
-                    ? this.curValObj.name || this.curValObj._name
+                    ? this.curValObj[this.nameKey] || this.curValObj.name || this.curValObj._name
                     : "";
             },
             set (val) {
@@ -83,7 +91,7 @@ export default {
             return this.curValList.map(key => this.getItemObj(key));
         },
         curValNameList () {
-            return this.curValObjList.map(item => item.name || item._name);
+            return this.curValObjList.map(item => item[this.nameKey] || item.name || item._name);
         },
         showMulVal () {
             return this.$isEmptyData(this.curValList)
@@ -106,18 +114,18 @@ export default {
         // 单选模式 点击选项
         clickRadioItem (item, index) {
             if (!this.getRadioItemDisabled(item)) {
-                if (this.curVal === item._key) {
+                if (this.curVal === item[this.saveKey]) {
                     if (this.clearable) {
                         this.curVal = "";
                     }
                 } else {
-                    this.curVal = item._key;
+                    this.curVal = item[this.saveKey];
                 }
             }
         },
         // 单选模式 取消选择项
         cancelRadioItemSelect (item, index) {
-            if (this.curVal === item._key) {
+            if (this.curVal === item[this.saveKey]) {
                 this.clickRadioItem(item, index);
             }
         },
@@ -125,21 +133,22 @@ export default {
         clickCheckItem (item, index) {
             if (!this.getCheckItemDisabled(item)) {
                 this.curValList = this.getItemCheckStatus(item)
-                    ? this.curValList.filter(key => key !== item._key)
-                    : [...this.curValList, item._key];
+                    ? this.curValList.filter(key => key !== item[this.saveKey])
+                    : [...this.curValList, item[this.saveKey]];
             }
         },
 
         /* ------- 方法 ------- */
         // 获取某项的对象数据
         getItemObj (val) {
-            const obj = this.listData.find(item => item._key === val) || {
-                _key: val,
-                name: `提示：选项${val}已不存在`
+            const obj = this.listData.find(item => item[this.saveKey] === val) || {
+                [this.saveKey]: val,
+                [this.nameKey]: `提示：选项${val}已不存在`
             };
 
             return !this.$isEmptyData(val)
                 ? {
+                    name: obj[this.nameKey],
                     ...obj,
                     // 查看状态时tag用
                     style: {
@@ -152,7 +161,7 @@ export default {
         },
         // 获取某项的选中状态
         getItemCheckStatus (item) {
-            return this.curValList.includes(item._key);
+            return this.curValList.includes(item[this.saveKey]);
         },
         // 获取某项的class集合 --flat方式在用
         getItemClass (item) {
@@ -199,8 +208,8 @@ export default {
                         this.initListData = [
                             ...this.initListData,
                             ...data.list.map(dataItem => ({
-                                _key: dataItem._key,
-                                name: dataItem.name
+                                [this.saveKey]: dataItem[this.saveKey],
+                                [this.nameKey]: dataItem[this.nameKey]
                             }))
                         ];
                     }

package/src/components/list/BriFlatTable.vue

@@ -105,7 +105,12 @@
 
             tablePropsObj () {
                 return {
-                    maxHeight: this.contentHeight
+                    maxHeight: this.contentHeight,
+                    cellStyleOption: {
+                        bodyCellClass: ({rowIndex}) => {
+                            return "bri-table-td bri-table-td-edit";
+                        }
+                    }
                 };
             },
             selfPropsObj () {
@@ -230,7 +235,8 @@
                                                         formData: row,
                                                         formItem: this.resetCol(item),
                                                         rowIndex: rowIndex,
-                                                        parentData: this.listData
+                                                        parentData: this.listData,
+                                                        allFormList: this.columns
                                                     },
                                                     on: {
                                                         blur: () => this.controlBlur(null, column, row, arguments),
@@ -245,7 +251,8 @@
                                                 formData: row,
                                                 formItem: this.resetCol(item),
                                                 rowIndex: rowIndex,
-                                                parentData: this.listData
+                                                parentData: this.listData,
+                                                allFormList: this.columns
                                             },
                                             on: {
                                                 blur: () => this.controlBlur(null, column, row, arguments),

package/src/components/list/DshCascaderTable.vue

@@ -153,6 +153,7 @@
                                                         ...col,
                                                         _heightAuto: heightAuto
                                                     }"
+                                                    :allFormList="subColumns"
                                                     @blur="controlBlur(null, col, row[col.nodeKey], arguments)"
                                                     @change="$dispatchEvent(operationMap.changeVal, col, row[col.nodeKey], arguments)"
                                                 ></dsh-list-unit>

package/src/components/unit/DshFormUnit.vue

@@ -98,12 +98,6 @@
             unitMixin
         ],
         props: {
-            allFormList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
             changedFields: {
                 type: Array,
                 default () {

package/src/components/unit/DshListUnit.vue

@@ -23,6 +23,7 @@
                     size: 'default',
                     inTable: true
                 }"
+                :allFormList="allFormList"
                 :rowIndex="rowIndex"
                 :parentData="parentData"
                 @blur="blur"

package/src/components/unit/unitMixin.js

@@ -18,6 +18,12 @@ export default {
             default () {
                 return {};
             }
+        },
+        allFormList: {
+            type: Array,
+            default () {
+                return [];
+            }
         }
     },
     data () {

package/src/styles/components/list/BriTable.less

@@ -26,48 +26,6 @@
         box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
     }
 
-    &-th {
-        padding: 4px 8px;
-        border-bottom: none !important;
-        background-color: #F0F0F0;
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(0, 0, 0, 0.6);
-        position: relative;
-    }
-
-    &-td {
-        position: relative;
-        padding: 4px 20px 12px 20px;
-
-        &-tip {
-            padding: 0px 0px 0px 20px;
-            font-size: 12px;
-            line-height: 1;
-            color: #ed4014;
-            position: absolute;
-            top: calc(100% -15px);
-            left: 0px;
-        }
-
-        &-operation {
-            .DshButtons-dropdown-more {
-                padding: 0px;
-                margin-left: 16px;
-            }
-
-            &-btn {
-                margin-left: 16px;
-                padding: 0px;
-        
-
-                &:first-of-type {
-                    margin: 0px;
-                }
-            }
-        }   
-    }
-
     &-content {
         width: 100%;
         max-height: 100%;
@@ -104,9 +62,9 @@
                         }
                     }
                     
-                    tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td {
-                        padding: 4px 20px 12px 20px;
-                    }
+                    // tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td {
+                    //     padding: 4px 20px 12px 20px;
+                    // }
                 }
             }
             
@@ -142,6 +100,51 @@
         color: @textColor;
         .dsh-flex-row-center-center();
     }
+
+    &-th {
+        padding: 4px 8px;
+        border-bottom: none !important;
+        background-color: #F0F0F0;
+        font-size: 14px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.6);
+        position: relative;
+    }
+
+    &-td {
+        position: relative;
+
+        &-tip {
+            padding: 0px 0px 0px 20px;
+            font-size: 12px;
+            line-height: 1;
+            color: #ed4014;
+            position: absolute;
+            top: calc(100% -15px);
+            left: 0px;
+        }
+
+        &-operation {
+            .DshButtons-dropdown-more {
+                padding: 0px;
+                margin-left: 16px;
+            }
+
+            &-btn {
+                margin-left: 16px;
+                padding: 0px;
+        
+
+                &:first-of-type {
+                    margin: 0px;
+                }
+            }
+        }
+
+        &-edit {
+            padding: 4px 20px 12px 20px!important;
+        }
+    }
 }
 
 

package/src/utils/table.js

@@ -64,7 +64,7 @@ const transformToColumns = function (form, {
     showRequired = false,
     showDescription = false,
     headHeightAuto = false
-} = {}) {
+}, allFormList = []) {
     return form
         .map(col => {
             const typeData = this.$modFieldMap[col._type] || {};
@@ -150,7 +150,8 @@ const transformToColumns = function (form, {
                                     canEdit: false,
                                     rowIndex: rowIndex,
                                     formData: row,
-                                    formItem: col
+                                    formItem: col,
+                                    allFormList: allFormList
                                 }
                             });
                         }