cnhis-design-vue 0.2.13-beta → 0.2.17-beta

package/packages/select-label/labelFormContent.vue

@@ -6,7 +6,37 @@
     </div>
     <div v-show="!allDisable" style="height: 100%;">
       <div class="label-wrap">
+        <!-- 表单内嵌打开标签组件的样式 -->
+        <div v-if="explicit" class="explicit-continer">
+          <a-tabs hideAdd :activeKey="labelAnchorKey" @change="labelAnchorTabsOnChange" tab-position="top">
+            <template v-for="(v, i) in labelConfig">
+              <a-tab-pane :key="v.curKey">
+                <span slot="tab">
+                  {{ i }}
+                  <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span>
+                </span>
+                <div class="explicit-label-wrap left-label-wrap">
+                  <div class="edit-label-content">
+                    <labelClassify
+                      :classifyItem="v"
+                      :handleLabelChange="handleLabelChange"
+                      :handleLabelColor="handleLabelColor"
+                      :handleDelLabel="handleDelLabel"
+                      :hanldeBlur="hanldeBlur"
+                      :handleAddLabel="handleAddLabel"
+                      :clearaddVal="clearaddVal"
+                      :isEdit="isEdit"
+                      :sourceType="sourceType"
+                    />
+                  </div>
+                </div>
+              </a-tab-pane>
+            </template>
+          </a-tabs>
+        </div>
+        <!-- 普通标签样式 -->
         <div
+          v-else
           class="left-label-wrap"
           :class="{
             'total-left-label-wrap': isChangeWindow
@@ -22,7 +52,9 @@
             </template>
           </a-tabs>
         </div>
+
         <div
+          v-if="!explicit"
           class="right-label-wrap"
           :class="{
             'total-right-label-wrap': isChangeWindow
@@ -38,43 +70,17 @@
               {{ k }}
               <span class="edit-label-type">({{ v.multipleChoice == 2 ? '单' : '多' }}选)</span>
             </div>
-            <div class="edit-content">
-              <!-- disable -->
-              <div v-if="!v.itemList" class="label-disable-wrap">
-                <p class="label-disable-title">无可选标签</p>
-                <p class="label-disable-desc">请联系管理员进行标签管理设置</p>
-              </div>
-              <!--  -->
-              <div v-else class="label-content">
-                <a-checkable-tag
-                  v-for="item in v.itemList"
-                  v-model="item.isSelect"
-                  @change="handleLabelChange($event, item, v)"
-                  :key="item.labelId"
-                  :style="handleLabelColor(item)"
-                  :class="{ 'sys-label-tag': item.isPublic && item.isPublic == 1 }"
-                >
-                  <a-tooltip placement="topLeft">
-                    <template slot="title">
-                      <span>{{ item.labelName }}</span>
-                    </template>
-                    {{ item.labelName }}
-                  </a-tooltip>
-                  
-                  <template v-if="sourceType != 'guage'">
-                    <a-icon class="label-close" v-show="!(item.isPublic && item.isPublic == 1)" type="close" @click.native.stop="handleDelLabel(item, v)" />
-                  </template>
-                </a-checkable-tag>
-                <a-button v-if="isEdit && !v.isNoAdd && sourceType != 'guage'" type="dashed" class="label-add" v-show="!v.showAdd" @click="handleAddLabel($event, v)">
-                  <a-icon type="plus" />
-                  <!-- {{ $t("1.1.2") }} -->
-                  标签
-                </a-button>
-                <a-input v-if="isEdit && !v.isNoAdd && sourceType != 'guage'" class="label-add add-input" v-model.trim="v.addVal" v-show="v.showAdd" @blur="hanldeBlur($event, v)">
-                  <a-icon slot="suffix" type="close" @click.native.stop="clearaddVal($event, v)" />
-                </a-input>
-              </div>
-            </div>
+            <labelClassify
+              :classifyItem="v"
+              :handleLabelChange="handleLabelChange"
+              :handleLabelColor="handleLabelColor"
+              :handleDelLabel="handleDelLabel"
+              :hanldeBlur="hanldeBlur"
+              :handleAddLabel="handleAddLabel"
+              :clearaddVal="clearaddVal"
+              :isEdit="isEdit"
+              :sourceType="sourceType"
+            />
           </div>
         </div>
       </div>
@@ -113,6 +119,8 @@ import utils from '@/utils/utils-map';
 import { Tooltip, Icon, Button, Input, Tag, Tabs, Anchor } from 'ant-design-vue';
 import create from '@/core/create';
 import vexutils from '@/utils/vexutils';
+
+import labelClassify from './label-classify.vue';
 export default create({
   name: 'label-form-content',
   components: {
@@ -125,7 +133,8 @@ export default create({
     [Tooltip.name]: Tooltip,
     [Button.name]: Button,
     [Tag.name]: Tag,
-    [Tag.CheckableTag.name]: Tag.CheckableTag
+    [Tag.CheckableTag.name]: Tag.CheckableTag,
+    labelClassify
   },
   props: {
     item: {
@@ -156,7 +165,13 @@ export default create({
     labelOptions: {
       type: Object
     },
-    sourceType: String
+    sourceType: String,
+
+    explicit: {
+      // 标签选择外显
+      type: Boolean,
+      default: false
+    }
   },
   inject: {},
   data() {
@@ -193,12 +208,12 @@ export default create({
     }
   },
   watch: {
-    labelOptions:{
-      immediate:true,
+    labelOptions: {
+      immediate: true,
       deep: true,
-      handler(val){
-        if(!val) return;
-        this.handleLabelInit()
+      handler(val) {
+        if (!val) return;
+        this.handleLabelInit();
       }
     }
     // labelVisible: {
@@ -223,16 +238,25 @@ export default create({
 
     handleLabelInit() {
       if (this.isLock) return;
-      const copy = JSON.parse(JSON.stringify(this.labelOptions))
+      this.cacheLabelConfig = { ...this.labelConfig };
+      const copy = JSON.parse(JSON.stringify(this.labelOptions));
+
+      for (let key in copy) {
+        // let olbKey = this?.cacheLabelConfig[key]?.curKey
+        let typeId = copy[key]?.typeId || '';
+        Object.assign(copy[key], {
+          curKey: `${key}_${typeId}~${this.randomId()}`
+        });
+      }
+
       this.$set(this, 'labelConfig', copy);
       this.$nextTick(() => {
         this.hanldeBackfill();
-        for (let key in this.labelConfig) {
-          Object.assign(this.labelConfig[key], {
-            curKey: this.randomId()
-          });
+        let defKey = undefined;
+        if (this.explicit && this.inited) {
+          defKey = this.labelAnchorKey;
         }
-        this.setLabelDeafultClick(this.labelConfig);
+        this.setLabelDeafultClick(this.labelConfig, defKey);
         this.inited = true;
       });
     },
@@ -246,10 +270,10 @@ export default create({
           let itemList = labelConfig[k]?.itemList || [];
           if (itemList.length) {
             itemList.forEach(v => {
-              if(selectLabelId.includes(v.labelId)){
-                this.$set(v,'isSelect', true)
+              if (selectLabelId.includes(v.labelId)) {
+                this.$set(v, 'isSelect', true);
               }
-            })
+            });
           }
         });
       }
@@ -282,6 +306,7 @@ export default create({
              */
             isSelect = selectList.findIndex(i => i.labelId == n.labelId) !== -1;
             n.isSelect = isSelect; // 是否已选
+            this.$set(n, 'isSelect', isSelect);
             /**
              * typeName 按照分类处理
              * 没有分类创建分类，有则添加
@@ -326,11 +351,19 @@ export default create({
       }
     },
     // 默认选中第一个分类
-    setLabelDeafultClick(labelObj) {
+    setLabelDeafultClick(labelObj, deafulteKey) {
       if (!labelObj) return;
       let objKeys = Object.keys(labelObj) || [];
       if (!objKeys.length) return;
       let curKey = labelObj[objKeys[0]].curKey;
+      // 找到默认选中的tab
+      if (deafulteKey && typeof deafulteKey === 'string') {
+        let [q] = deafulteKey.split('~');
+        let f = objKeys.find(k => labelObj[k] && labelObj[k].curKey && labelObj[k].curKey.includes(q));
+        if (f) {
+          curKey = labelObj[f].curKey;
+        }
+      }
       if (!curKey) return;
       this.labelAnchorTabsOnChange(curKey);
     },
@@ -463,7 +496,7 @@ export default create({
       if (status) {
         this.$message.success('添加成功！');
         // this.handleEditLabel(this.editLabelItem, true);
-        this.$emit('updateLabelData')
+        this.$emit('updateLabelData');
         v.showAdd = false;
       }
     },
@@ -473,8 +506,7 @@ export default create({
       const multipleChoice = labelGroup.multipleChoice;
       // let selectedList = this.labelSelectedEdit || [];
       // 修复 标签多选 点击modal取消按钮 回显也会被选中
-      let selectedList =
-        (this.labelSelectedEdit?.length && vexutils.clone(this.labelSelectedEdit, true)) || [];
+      let selectedList = (this.labelSelectedEdit?.length && vexutils.clone(this.labelSelectedEdit, true)) || [];
       if (v) {
         if (selectedList.some(n => n.labelId == d.labelId)) {
           return;
@@ -497,6 +529,12 @@ export default create({
         }
       }
       this.labelSelectedEdit = [...selectedList];
+      this.$forceUpdate();
+
+      // 外显实时改变通知
+      if (this.explicit) {
+        this.$emit('explicitOnChange', [...this.labelSelectedEdit]);
+      }
     },
 
     async handleDelLabel(v) {
@@ -517,7 +555,7 @@ export default create({
           this.$emit('valueOnChange', [...selectObj], this.item);
           this.$emit('onChange', [...selectObj]);
         }
-        this.$emit('updateLabelData')
+        this.$emit('updateLabelData');
         // this.handleEditLabel(this.editLabelItem, true);
       } else {
         this.$message.warning('删除失败');
@@ -570,8 +608,38 @@ export default create({
      * 重置label选项
      */
     handleResetOptions() {
-      this.$set(this.item, "labelObj", {});
-      this.$set(this.item, "labelList", null);
+      this.$set(this.item, 'labelObj', {});
+      this.$set(this.item, 'labelList', null);
+    },
+
+    /**
+     * 设置标签单个状态
+     */
+    hanldeSetLabelItem(id, state) {
+      const { labelConfig } = this;
+      if (typeof labelConfig === 'object') {
+        let keys = Object.keys(labelConfig || {});
+        keys.forEach(k => {
+          let itemList = labelConfig[k]?.itemList || [];
+          if (itemList.length) {
+            itemList.forEach(v => {
+              if (id == v.labelId) {
+                this.$set(v, 'isSelect', state);
+              }
+            });
+          }
+        });
+      }
+      // 如果是删除
+      if (false === state) {
+        // 删除选中list
+        if (Array.isArray(this.labelSelectedEdit)) {
+          const fdIndex = this.labelSelectedEdit.findIndex(n => n.labelId == id);
+          if (fdIndex != -1) {
+            this.labelSelectedEdit.splice(fdIndex, 1);
+          }
+        }
+      }
     }
   }
 });
@@ -592,6 +660,12 @@ export default create({
         height: calc(100vh - 109px);
         max-height: calc(100vh - 109px);
       }
+      &.explicit-label-wrap {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        overflow-y: auto;
+      }
       /deep/.ant-tabs {
         height: 100%;
         .ant-tabs-nav-container {

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"
@@ -57,6 +76,7 @@
         </div>
       </template>
       <labelFormContent
+       :explicit="explicit"
         v-bind="$attrs"
         ref="labelFormContent"
         :labelVisible="labelVisible"
@@ -138,6 +158,16 @@ export default create({
       type: Function,
       default: () => Promise.resolve({ rows: [] })
     },
+
+    explicit:{ // 标签选择外显
+      type: Boolean,
+      default: false
+    },
+
+    explicitHeiht:{
+      type: String,
+      default: ""
+    }
   },
   computed: {
     item_is_edit() {
@@ -145,6 +175,12 @@ export default create({
       return (item.is_edit == 1 || item.isShow) && !this.isDetail;
     }
   },
+  mounted() {
+    // 外显初始化
+    if(this.explicit){
+      this.handleEditLabel();
+    }
+  },
   watch: {
     selectedList: {
       immediate: true,
@@ -188,6 +224,7 @@ export default create({
         selectedList.splice(fdIndex, 1);
       }
       this.handleEmit(selectedList);
+      this.hanldeSetLabelItem(d.labelId, false);
     },
     handleCommonLabelChange(v, d) {
       const selectedList = this.labelSelectedList || [];
@@ -216,10 +253,14 @@ export default create({
     },
     handleEditLabel() {
       if (this.isLock) return;
-      this.labelVisible = true;
+      if(!this.explicit) {
+        this.labelVisible = true;
+      }
       this.handleGetLabelData(this.item)
     },
     handleLabelCancel() {
+      if(this.explicit) return;
+
       this.$refs.labelFormContent?.resetShowAdd();
       this.editLabelItem.showAdd = false;
       this.editLabelItem = {};
@@ -257,7 +298,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}`;
@@ -270,6 +311,7 @@ export default create({
          * typeName 按照分类处理
          * 没有分类创建分类，有则添加
          */
+        this.$set(n,'isSelect',false)
         if (labelObj[n.typeName]) {
           labelObj[n.typeName].itemList.push({ ...n });
         } else {
@@ -359,6 +401,19 @@ 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);
+        })
+      }
     }
   }
 });

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

@@ -913,7 +913,7 @@ export default create({
     onSaveSearch() {
       this.$refs.quicksearch?.onSave();
     },
-    onSave(obj, isOutFilter = false) {
+    onSave(obj, isOutFilter = false, config = {}) {
       if (!this.validConObj(obj, this.searchFieldList, this.searchFieldLimit)) return false;
       let copy = [];
       if (this.outSearchFieldList.length) {
@@ -923,7 +923,7 @@ export default create({
       if (this.outRelationQuickSearch.length) {
         copyRelation = _.cloneDeep(this.outRelationQuickSearch, true);
       }
-      this.$emit('onSave', obj, isOutFilter, copy, copyRelation);
+      this.$emit('onSave', obj, isOutFilter, copy, copyRelation, config);
       this.modalVisible = false;
     },
     // 外部调用
@@ -1631,7 +1631,7 @@ export default create({
       if(this.outSearchFieldList.some(v => !!v.explicitDefaultVal)){
         this.$emit('outSearchInit');
         if('reset' != config?.type){
-          this.outFilterChange();
+          this.outFilterChange({type:'outSearchInit'});
         }
       }
     },
@@ -1669,9 +1669,9 @@ export default create({
         this.rowFoldHideBtnList = hideBtn;
       }
     },
-    outFilterChange() {
+    outFilterChange(config= {}) {
       let conObj = this.getConObjParams() || [];
-      this.onSave(conObj, true);
+      this.onSave(conObj, true, config);
     },
     visibleBtn(btn) {
       if (!btn.isVisible) return false;

package/packages/table-filter/src/components/c-tree-select/tree-select.vue

@@ -223,7 +223,7 @@ export default {
         let [v] = this.treeData;
         this.item.value = v?.value ? [v.value] : [];
         if (typeof this.outFilterChange === 'function') {
-          this.outFilterChange();
+          this.outFilterChange({type: 'outSearchInit'});
         }
       }
     },

package/packages/table-filter/src/components/out-quick-search/out-quick-search.vue

@@ -227,7 +227,7 @@ export default {
         this.getWordbookData(item.setting.wordbook, obj).then(({ data }) => {
           this.handleWordbookData(item, data, obj);
           if('hasDefaultInit' == config?.type){
-            this.outFilterChange();
+            this.outFilterChange({type:'outSearchInit'});
           }
         });
       }
@@ -301,8 +301,8 @@ export default {
         this.outFilterChange();
       }
     },
-    outFilterChange() {
-      this.$emit("outFilterChange");
+    outFilterChange(config = {}) {
+      this.$emit("outFilterChange",config);
     },
     maxTagPlaceholder(item) {
       if (Array.isArray(item.value)) {

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

@@ -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", "");