cnhis-design-vue 0.2.18-beta → 0.2.22-beta

package/packages/select-label/select-label.vue

@@ -4,17 +4,36 @@
       <a-tag v-for="v in labelSelectedList" :key="v.labelId" :style="handleLabelColor(v, true)" :closable="item_is_edit" @close="closeTag(v)">
         {{ v.labelName }}
       </a-tag>
-      <span class="form-add-icon form-add-icon-label" @click="handleEditLabel" :class="{ disable: isLock }" v-show="item_is_edit">
+      <span v-if="!explicit" class="form-add-icon form-add-icon-label" @click="handleEditLabel" :class="{ disable: isLock }" v-show="item_is_edit">
         <a-icon class="add-icon" type="plus-circle" />
         新增
       </span>
     </div>
-    <div class="common-label" v-if="sourceType == 'form' && commonLabelList.length && item_is_edit">
+    <div class="common-label" v-if="sourceType == 'form' && commonLabelList.length && item_is_edit && !explicit">
       <span>常用</span>
       <a-checkable-tag v-for="(item, i) in commonLabelList" v-model="item.isSelect" @change="handleCommonLabelChange($event, item)" :key="i" :style="handleLabelColor(item)">
         {{ item.labelName }}
       </a-checkable-tag>
     </div>
+    <div v-if="explicit">
+      <labelFormContent
+       :explicit="explicit"
+        v-bind="$attrs"
+        ref="labelFormContent"
+        :labelVisible="labelVisible"
+        :item="item"
+        :isEdit="isEdit"
+        :isLock="isLock"
+        :labelSelectedList="labelSelectedList"
+        :isChangeWindow="isChangeWindow"
+        :labelOptions="editLabelItem.labelObj"
+        :sourceType="sourceType"
+        @updateLabelData="updateLabelData"
+        @explicitOnChange="explicitOnChange"
+      ></labelFormContent>
+    </div>
+
+    <!-- 弹窗 -->
     <a-modal
       class="label-form-modal-wrap modal-wrap standard-modal standard-modal-white"
       v-model="labelVisible"
@@ -58,6 +77,7 @@
         </div>
       </template>
       <labelFormContent
+       :explicit="explicit"
         v-bind="$attrs"
         ref="labelFormContent"
         :labelVisible="labelVisible"
@@ -105,7 +125,8 @@ export default create({
       modalWidth: '763px',
       modalHeight: '404px',
       maxHeight: '404px',
-      commonLabelList: []
+      commonLabelList: [],
+      multipleChoiceConfig: {}
     };
   },
   props: {
@@ -139,6 +160,16 @@ export default create({
       type: Function,
       default: () => Promise.resolve({ rows: [] })
     },
+
+    explicit:{ // 标签选择外显
+      type: Boolean,
+      default: false
+    },
+
+    explicitHeiht:{
+      type: String,
+      default: ""
+    }
   },
   computed: {
     item_is_edit() {
@@ -146,6 +177,16 @@ export default create({
       return (item.is_edit == 1 || item.isShow) && !this.isDetail;
     }
   },
+  mounted() {
+    // 外显初始化
+    if(this.explicit){
+      this.handleEditLabel();
+    } else {
+      // 获取标签分类
+      this.handleGetMultipleChoiceConfig(this.item);
+    }
+
+  },
   watch: {
     selectedList: {
       immediate: true,
@@ -189,13 +230,19 @@ export default create({
         selectedList.splice(fdIndex, 1);
       }
       this.handleEmit(selectedList);
+      this.hanldeSetLabelItem(d.labelId, false);
     },
     handleCommonLabelChange(v, d) {
-      const selectedList = this.labelSelectedList || [];
+       let multipleChoiceConfig = this.multipleChoiceConfig;
+      let selectedList = this.labelSelectedList || [];
       if (v) {
         if (selectedList.some(n => n.labelId == d.labelId)) {
           return;
         }
+        // 不允许多选的类型，先删除，再新增
+        if('2' == multipleChoiceConfig[d.typeId]){
+          selectedList = selectedList.filter(item => item.typeId !== d.typeId);
+        }
         selectedList.push(d);
       } else {
         const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
@@ -215,12 +262,16 @@ export default create({
         }
       });
     },
-    handleEditLabel() {
+    handleEditLabel(type) {
       if (this.isLock) return;
-      this.labelVisible = true;
+      if(!this.explicit && type !== 'init') {
+        this.labelVisible = true;
+      }
       this.handleGetLabelData(this.item)
     },
     handleLabelCancel() {
+      if(this.explicit) return;
+
       this.$refs.labelFormContent?.resetShowAdd();
       this.editLabelItem.showAdd = false;
       this.editLabelItem = {};
@@ -258,7 +309,7 @@ export default create({
 
     async handleGetLabelData(v, update) {
       const { rows, results } = await this.getLabelList(v);
-      console.log(rows, results)
+      // console.log(rows, results)
       const labelList = rows || [];
       const labelObj = {};
       const cacheKey = `${v.val_key}_${v.name}`;
@@ -271,6 +322,7 @@ export default create({
          * typeName 按照分类处理
          * 没有分类创建分类，有则添加
          */
+        this.$set(n,'isSelect',false)
         if (labelObj[n.typeName]) {
           labelObj[n.typeName].itemList.push({ ...n });
         } else {
@@ -299,48 +351,60 @@ export default create({
     setLabelTypeStatus(results) {
       if (!results) return false;
       let keys = Object.keys(results);
-
+      let multipleChoiceConfig ={};
       let choiceTypes = (results.typeList || []).reduce((obj, item) => {
-        obj[item.typeName] = item.multipleChoice;
+        multipleChoiceConfig[item.typeId] = item.multipleChoice
+
+        obj[item.typeName] = {
+          multipleChoice:item.multipleChoice,
+          parentColor: item.parentColor,
+          allowCreateByPersonal:item.allowCreateByPersonal
+        }
         return obj;
       }, {});
+
+      if(this.explicit){
+        this.multipleChoiceConfig = multipleChoiceConfig;
+      }
       keys.forEach(key => {
         if (key === 'typeList') return;
         // 空，允许
         if (key === 'emptyTypes') {
           results[key].forEach(item => {
-            this.$set(this.editLabelItem.labelObj, item.typeName, {
-              multipleChoice: choiceTypes[item.typeName],
+            this.$set(this.editLabelItem.labelObj, item.typeName, Object.assign({
               addVal: '',
               showAdd: false,
               itemList: [],
               typeId: item.typeId,
               typeName: item.typeName
-            });
+            },choiceTypes[item.typeName] || {}));
           });
           return;
         }
         if (utils.isPlainObject(results[key])) {
           // 空，不允许
           if (!this.editLabelItem.labelObj[key]) {
-            this.$set(this.editLabelItem.labelObj, key, {
-              multipleChoice: choiceTypes[key],
+            this.$set(this.editLabelItem.labelObj, key, Object.assign({
               addVal: '',
               showAdd: false,
               itemList: false,
               typeId: '',
               typeName: key
-            });
+            },{...(choiceTypes[key] || {})}));
           } else {
             // 非空，不允许
             this.$set(this.editLabelItem.labelObj[key], 'isNoAdd', true);
-            this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]);
+            this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]?.multipleChoice);
+            this.$set(this.editLabelItem.labelObj[key], 'allowCreateByPersonal', choiceTypes[key]?.allowCreateByPersonal);
+            this.$set(this.editLabelItem.labelObj[key], 'parentColor', choiceTypes[key]?.parentColor);
           }
         } else {
-          this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]);
+          this.$set(this.editLabelItem.labelObj[key], 'multipleChoice', choiceTypes[key]?.multipleChoice);
+          this.$set(this.editLabelItem.labelObj[key], 'allowCreateByPersonal', choiceTypes[key]?.allowCreateByPersonal);
+          this.$set(this.editLabelItem.labelObj[key], 'parentColor', choiceTypes[key]?.parentColor);
         }
       });
-    },
+   },
 
     updateLabelData(){
       this.handleGetLabelData(this.item, true)
@@ -360,6 +424,31 @@ export default create({
           this.getCommonlabelsList(this.item.label_type);
         });
       }
+    },
+
+    // 标签外显发生变化
+    explicitOnChange(){
+      this.handleSaveLabel();
+    },
+
+    hanldeSetLabelItem(id, state){
+      if(this.explicit){
+        this.$nextTick(()=>{
+          this.$refs.labelFormContent?.hanldeSetLabelItem(id, state);
+        })
+      }
+    },
+
+    async handleGetMultipleChoiceConfig(v){
+      const { rows, results } = await this.getLabelList(v);
+      if (!results) return false;
+      let multipleChoiceConfig = (results.typeList || []).reduce((obj, item) => {
+        obj[item.typeId] = item.multipleChoice
+        return obj;
+      }, {});
+
+       this.multipleChoiceConfig = multipleChoiceConfig;
+      this.$set(this,'multipleChoiceConfig',multipleChoiceConfig);
     }
   }
 });
@@ -391,6 +480,10 @@ export default create({
 .tag-label {
   /deep/ .ant-tag {
     margin-bottom: 4px;
+    border: 1px solid #f1f1f1;
+    .anticon-close {
+      color: #fff;
+    }
   }
 }
 .common-label {

package/packages/table-filter/src/base-search-com/BaseSearch.vue

@@ -44,25 +44,42 @@
           <li v-if="isShowSetting('hideSearch') && !showRelatedTreeBtn" ref="inputSearchLi" class="baseSearch-input-search">
             <template v-if="outSearchFieldList && outSearchFieldList.length">
               <a-input
-                :style="{ width, margin: '0 8px 8px 0' }"
+                :style="{ width: inputSearchW + 'px', margin: '0 8px 8px 0' }"
                 allowClear
-                placeholder="请输入关键字搜索"
+                :placeholder="searchPlaceHolder"
                 :value="currentValue"
                 @input="$emit('input', $event.target.value)"
                 @pressEnter="outFilterChange"
+                class="input-search-com"
               >
+              <template slot="prefix" v-if="showPlaceholderPrefix">
+                <a-tooltip
+                  :title="searchPlaceHolder"
+                  overlayClassName="basesearch-placeholder-tooltip"
+                >
+                  <a-icon type="info-circle" />
+                </a-tooltip>
+              </template>
               </a-input>
             </template>
             <a-input-search
               v-else
-              class="my-input-search"
-              :style="{ width }"
+              class="my-input-search input-search-com"
+              :style="{ width: inputSearchW + 'px' }"
               @search="onSearch"
               allowClear
-              placeholder="请输入关键字搜索"
+              :placeholder="searchPlaceHolder"
               :value="currentValue"
               @input="$emit('input', $event.target.value)"
             >
+            <template slot="prefix" v-if="showPlaceholderPrefix">
+                <a-tooltip
+                  :title="searchPlaceHolder"
+                  overlayClassName="basesearch-placeholder-tooltip"
+                >
+                  <a-icon type="info-circle" />
+                </a-tooltip>
+              </template>
               <a-button slot="enterButton" type="primary">
                 <svg-icon icon-class="xitongtubiaosousuo"></svg-icon>
               </a-button>
@@ -83,7 +100,7 @@
 
           <!-- 平铺列表 tree -->
           <template v-if="showRelatedTreeBtn">
-            <li :class="[showRelatedSearchFold ? 'related-search-input' : 'related-search-input-expand']">
+            <li v-if="showRelatedSearch" :class="[isRelatedSearchFold ? 'related-search-input' : 'related-search-input-expand']">
               <a-input-search
                 ref="relatedSearchInput"
                 class="my-input-search my-input-search-related"
@@ -312,6 +329,10 @@
         >{{ item.name }} {{ countTabCondition == 1 && (item.digital || item.digital === 0) ? '(' + (item.digital || 0) + ')' : '' }}</div
       >
     </div>
+    <!-- palceholder 文字宽度计算 -->
+    <span class="baseSearchPlaceholderSpan" ref="baseSearchPlaceholderSpan">
+      {{ searchPlaceHolder }}
+    </span>
   </div>
 </template>
 
@@ -535,7 +556,8 @@ export default create({
     filterApiConfigOutSearch: {
       type: Object,
       default: () => ({})
-    }
+    },
+    useFieldList: Array
   },
   components: {
     [Button.name]: Button,
@@ -713,6 +735,21 @@ export default create({
       return function(key) {
         return this.$attrs.tableOptions?.[key];
       }
+    },
+    searchPlaceHolder() {
+      if (!this.useFieldList?.length || this.showRelatedTreeBtn) return "请输入关键字搜索";
+      let str = "";
+      let strList = this.useFieldList
+        ?.map(item => {
+          if (item.isSearch != 1) return "";
+          return item.formTitle || item.alias || item.title;
+        })
+        .filter(Boolean);
+      str = "输入" + strList.join("/");
+      return str || "请输入关键字搜索";
+    },
+    showRelatedSearch() {
+      return this.showRelatedTreeBtn && this.isShowSetting('hideSearch')
     }
   },
   data() {
@@ -760,7 +797,9 @@ export default create({
       groupBtnObj: {},
       btnObj: BTNOBJ,
       printBtnStrategys: [], // 打印按钮组策略list
-      outRelationQuickSearch: [] // 关联表 筛选外显
+      outRelationQuickSearch: [], // 关联表 筛选外显
+      inputSearchW: 200,
+      showPlaceholderPrefix: false
     };
   },
   created() {
@@ -2043,6 +2082,27 @@ export default create({
             });
         }
       }
+    },
+    searchPlaceHolder: {
+      immediate: true,
+      handler(val) {
+        if (!val || this.showRelatedTreeBtn) return;
+        this.$nextTick(() => {
+          this.showPlaceholderPrefix = false;
+          let dom = this.$refs.baseSearchPlaceholderSpan;
+          if(!dom) return;
+          // input 框有padding 32px  ...显示需要多预留一些宽度12px
+          let w = dom.offsetWidth + 45;
+          console.log(w, "wwww");
+          let maxW = this.showOutSearch ? 284 : 244;
+          this.inputSearchW = w > maxW ? 300 : w < 200 ? 200 : w;
+          if (w > maxW) {
+            this.showPlaceholderPrefix = true;
+          }
+          this.onResize();
+          console.log(this.inputSearchW);
+        });
+      }
     }
   }
 });
@@ -2214,6 +2274,13 @@ export default create({
         }
       }
     }
+    .baseSearch-input-search {
+      .input-search-com {
+        input {
+          padding: 4px 8px;
+        }
+      }
+    }
   }
   /deep/ .num-picker {
     position: relative;
@@ -2308,6 +2375,11 @@ export default create({
     /* Internet Explorer 10+ */
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
   }
+  .baseSearchPlaceholderSpan {
+    visibility: hidden;
+    position: absolute;
+    z-index: -1;
+  }
 }
 </style>
 <style lang="less">

package/packages/table-filter/src/mixins/mixins.js

@@ -383,7 +383,15 @@ export const outQuickSearchFn = {
       arr.forEach(el => {
         el.setting = typeof el.setting == "string" ? JSON.parse(el.setting) : el.setting;
         const attr = el?.settingObj?.attr || "";
+        const isPreciseSearch = el?.settingObj?.isPreciseSearch || "";
         const showSetting = el?.setting?.showSetting || []
+        /**
+          * NUMBER和TEXT属性字段
+          * 如果 开启了精准搜索，则传条件的时候 要传 EQ
+          * isPreciseSearch: 0/1
+          */
+        let textCon = el.fieldType == "TEXT" &&  isPreciseSearch == 1 ? 'EQ' : 'CL';
+
         // 映射优先级最高
         if (showSetting?.length) {
           let tvalue = []
@@ -484,7 +492,7 @@ export const outQuickSearchFn = {
               this.handleSetLabelOptions(el.setting.labelType, el);
             }
           } else if ("PASSWORD" === attr) {
-            this.$set(el, "con", el.fieldType === "NUMBER" ? "EQ" : "CL");
+            this.$set(el, "con", el.fieldType === "NUMBER" ? "EQ" : textCon);
             this.$set(el, "comAttr", "PASSWORD");
             this.$set(el, "PASSWORDTYPE", true);
             this.$set(el, "value", "");
@@ -495,7 +503,7 @@ export const outQuickSearchFn = {
             this.$set(el, "com", "Text");
             this.$set(el, "attr", "DURATION");
           } else {
-            this.$set(el, "con", "CL");
+            this.$set(el, "con", textCon);
             this.$set(el, "value", "");
             this.$set(el, "com", "Text");
           }

package/packages/table-filter/src/quick-search/QuickSearch.vue

@@ -69,20 +69,20 @@
                   </div>
                   <div class="label-unfold-btn" v-if="v.itemList && v.isShowBtn">
                     <!-- {{ v.isUnfold }} -->
-                    <span>
-                      <a-icon
-                        type="up-square"
-                        theme="filled"
-                        style="color: #2d7aff"
-                        @click.stop="handleLabelUpfold(v)"
-                        v-if="v.isUnfold"
-                      />
-                      <a-icon
-                        v-else
-                        type="down-square"
-                        class="label-unfold-btn-down"
-                        @click.stop="handleLabelUpfold(v)"
-                      />
+                    <span @click.stop="handleLabelUpfold(v)">
+                      <template v-if="v.isUnfold">
+                        <span>收起</span>
+                        <a-icon
+                          type="up-square"
+                          
+                        />
+                      </template>
+                      <template v-else>
+                        <span>展开</span>
+                        <a-icon
+                          type="down-square"
+                        />
+                      </template>
                     </span>
                   </div>
                 </div>
@@ -991,6 +991,8 @@ export default create({
     handlerInitSearchItem(arr) {
       if (!Array.isArray(arr)) return;
       arr.forEach(el => {
+        const isPreciseSearch = el?.settingObj?.isPreciseSearch || "";
+
         if (el.setting) {
           // el.seting 可能是 string / object
           el.setting = typeof el.setting == "string" ? JSON.parse(el.setting) : el.setting;
@@ -1085,8 +1087,14 @@ export default create({
             });
           }
         } else if (el.fieldType == "TEXT") {
-          this.$set(el, "con", "CL");
-          this.$set(el, "CL", "");
+          /**
+           * NUMBER和TEXT属性字段
+           * 如果 开启了精准搜索，则传条件的时候 要传 EQ
+           * isPreciseSearch: 0/1
+           */
+          let con = isPreciseSearch == 1 ? 'EQ': 'CL';
+          this.$set(el, "con", con);
+          this.$set(el, con, "");
         } else if (el.fieldType == "JSONB") {
           this.$set(el, "con", "EQ");
           this.$set(el, "EQ", "");
@@ -1693,6 +1701,7 @@ export default create({
     },
 
     handleLabelUpfold(v) {
+      console.log('触发---isUnfold');
       v.isUnfold = !v.isUnfold;
     },
 
@@ -1782,6 +1791,7 @@ export default create({
         line-height: 32px;
         text-align: right;
         padding-left: 12px;
+        color: #000;
       }
       .quick-item-col {
         padding: 0 12px;
@@ -1872,11 +1882,11 @@ export default create({
 
   // 标签
   .label-attr-container {
-    div.label-container {
-      // overflow: hidden;
-      // width: 380px;
-      // height: 84px;
-      // flex: none;
+    .edit-label {
+      color: #000000;
+      font-size: 14px;
+      line-height: 32px;
+      padding-left: 0;;
     }
     .label-container-height {
       overflow: hidden;
@@ -1888,11 +1898,23 @@ export default create({
       padding: 0;
     }
     .label-unfold-btn {
-      padding: 0px 15px;
+      margin: 8px 0;
+      color: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+      >span {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+      }
+      .anticon {
+        font-size: 16px;
+        margin-left: 8px;
+      }
       &:hover {
-        .label-unfold-btn-down {
-          color: #2d7aff;
-        }
+        color: #2d7aff;
+      }
+      &:active {
+        color: #2d7aff;
       }
     }
   }