cnhis-design-vue 0.2.20-beta → 0.2.24-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" type="card" @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() {
@@ -183,9 +198,9 @@ export default create({
         return !labelObj[key].itemList;
       });
     },
-    SelectedList(){
+    SelectedList() {
       const { labelSelectedList = [], labelSelectedEdit = [] } = this;
-      return labelSelectedList.concat(labelSelectedEdit)
+      return labelSelectedList.concat(labelSelectedEdit);
     },
     selectLabelId() {
       const list = this?.SelectedList || [];
@@ -196,12 +211,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: {
@@ -226,16 +241,24 @@ 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;
       });
     },
@@ -249,91 +272,100 @@ 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);
               }
-            })
+            });
           }
         });
       }
     },
 
     // 标签处理
-    async handleEditLabel(v = {}, update = false) {
-      try {
-        if (this.isLock) return;
-        if (v.labelList && !update) {
-          this.handleLabelSelected(v.labelList, this.labelSelectedList, v.labelObj);
-          this.inited = true;
-          this.editLabelItem = v;
-          this.setLabelDeafultClick(v.labelObj);
-        } else {
-          // TODO:
-          const { rows, results } = await this.getLabelList(v);
-          const labelList = rows || [];
-          const labelObj = {};
-          const cacheKey = `${v.val_key}_${v.name}`;
-          //  this.labelSelected[d.cacheKey]
-          let isSelect = false;
-          const selectList = update ? [...(this.labelSelectedEdit || [])] : [...(this.labelSelectedList || [])];
-          labelList.forEach(n => {
-            n.cacheKey = cacheKey;
-            // 根据 labelId 处理默认选中
-
-            /**
-             * 回填的值可能不在数据中，但是不能丢失。
-             */
-            isSelect = selectList.findIndex(i => i.labelId == n.labelId) !== -1;
-            n.isSelect = isSelect; // 是否已选
-            /**
-             * typeName 按照分类处理
-             * 没有分类创建分类，有则添加
-             */
-            if (labelObj[n.typeName]) {
-              labelObj[n.typeName].itemList.push({ ...n });
-            } else {
-              labelObj[n.typeName] = {
-                itemList: [{ ...n }],
-                showAdd: false,
-                addVal: '',
-                typeName: n.typeName,
-                typeId: n.typeId
-              };
-            }
-          });
-          /**
-           * labelObj 展示的分类值
-           * labelList 原始数据结构
-           * selectList 已选的数据
-           */
-          this.$set(v, 'labelObj', labelObj);
-          this.$set(v, 'labelList', labelList);
-          this.$set(this, 'labelSelectedEdit', selectList);
-          // 缓存
-          this.editLabelItem = v;
-          this.setLabelTypeStatus(results);
-          for (let key in labelObj) {
-            Object.assign(labelObj[key], {
-              curKey: this.randomId()
-            });
-          }
-          this.setLabelDeafultClick(labelObj);
+    // async handleEditLabel(v = {}, update = false) {
+    //   try {
+    //     if (this.isLock) return;
+    //     if (v.labelList && !update) {
+    //       this.handleLabelSelected(v.labelList, this.labelSelectedList, v.labelObj);
+    //       this.inited = true;
+    //       this.editLabelItem = v;
+    //       this.setLabelDeafultClick(v.labelObj);
+    //     } else {
+    //       // TODO:
+    //       const { rows, results } = await this.getLabelList(v);
+    //       const labelList = rows || [];
+    //       const labelObj = {};
+    //       const cacheKey = `${v.val_key}_${v.name}`;
+    //       //  this.labelSelected[d.cacheKey]
+    //       let isSelect = false;
+    //       const selectList = update ? [...(this.labelSelectedEdit || [])] : [...(this.labelSelectedList || [])];
+    //       labelList.forEach(n => {
+    //         n.cacheKey = cacheKey;
+    //         // 根据 labelId 处理默认选中
 
-          this.inited = true;
-        }
-      } catch (error) {
-        this.$set(v, 'labelObj', {});
-        this.$set(v, 'labelList', []);
-        console.log(error);
-        this.inited = true;
-      }
-    },
+    //         /**
+    //          * 回填的值可能不在数据中，但是不能丢失。
+    //          */
+    //         isSelect = selectList.findIndex(i => i.labelId == n.labelId) !== -1;
+    //         n.isSelect = isSelect; // 是否已选
+    //         this.$set(n, 'isSelect', isSelect);
+    //         /**
+    //          * typeName 按照分类处理
+    //          * 没有分类创建分类，有则添加
+    //          */
+    //         if (labelObj[n.typeName]) {
+    //           labelObj[n.typeName].itemList.push({ ...n });
+    //         } else {
+    //           labelObj[n.typeName] = {
+    //             itemList: [{ ...n }],
+    //             showAdd: false,
+    //             addVal: '',
+    //             typeName: n.typeName,
+    //             typeId: n.typeId
+    //           };
+    //         }
+    //       });
+    //       /**
+    //        * labelObj 展示的分类值
+    //        * labelList 原始数据结构
+    //        * selectList 已选的数据
+    //        */
+    //       this.$set(v, 'labelObj', labelObj);
+    //       this.$set(v, 'labelList', labelList);
+    //       this.$set(this, 'labelSelectedEdit', selectList);
+    //       // 缓存
+    //       this.editLabelItem = v;
+    //       this.setLabelTypeStatus(results);
+    //       for (let key in labelObj) {
+    //         Object.assign(labelObj[key], {
+    //           curKey: this.randomId()
+    //         });
+    //       }
+    //       this.setLabelDeafultClick(labelObj);
+
+    //       this.inited = true;
+    //     }
+    //   } catch (error) {
+    //     this.$set(v, 'labelObj', {});
+    //     this.$set(v, 'labelList', []);
+    //     console.log(error);
+    //     this.inited = true;
+    //   }
+    // },
     // 默认选中第一个分类
-    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);
     },
@@ -454,6 +486,8 @@ export default create({
       let parentColor = '';
       if (v.itemList?.length) {
         parentColor = v.itemList[0].parentColor || v.parentColor || '';
+      } else {
+        parentColor = v?.parentColor || "";
       }
 
       const params = {
@@ -466,7 +500,7 @@ export default create({
       if (status) {
         this.$message.success('添加成功！');
         // this.handleEditLabel(this.editLabelItem, true);
-        this.$emit('updateLabelData')
+        this.$emit('updateLabelData');
         v.showAdd = false;
       }
     },
@@ -476,8 +510,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;
@@ -500,6 +533,12 @@ export default create({
         }
       }
       this.labelSelectedEdit = [...selectedList];
+      this.$forceUpdate();
+
+      // 外显实时改变通知
+      if (this.explicit) {
+        this.$emit('explicitOnChange', [...this.labelSelectedEdit]);
+      }
     },
 
     async handleDelLabel(v) {
@@ -520,7 +559,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('删除失败');
@@ -573,8 +612,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);
+          }
+        }
+      }
     }
   }
 });
@@ -595,6 +664,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 {
@@ -632,6 +707,64 @@ export default create({
         max-height: calc(100vh - 109px);
       }
     }
+    .explicit-continer {
+      width: 100%;
+      border: 1px solid #d5d5d5;
+      // background: #F9F9F9;
+      /deep/ .ant-tabs-card {
+        .ant-tabs-nav-container {
+          height: 30px;
+          line-height: 30px;
+          margin-top: 0px;
+          .ant-tabs-tab-prev {
+            border-bottom: 1px solid #e8e8e8;
+            border-right: 1px solid #e8e8e8;
+          }
+          .ant-tabs-tab-next {
+            border-bottom: 1px solid #e8e8e8;
+            border-left: 1px solid #e8e8e8;
+          }
+        }
+        > .ant-tabs-content {
+          // height: 120px;
+          margin-top: -16px;
+
+          > .ant-tabs-tabpane {
+            background: #fff;
+            padding: 16px;
+          }
+        }
+
+        // ant-tabs-tab
+
+        > .ant-tabs-bar {
+          border-color: #fff;
+          .ant-tabs-tab {
+            margin-right:0;
+            border-radius:0;
+            line-height: 30px;
+            height: 30px;
+
+            border-right: 1px solid #e8e8e8!important;
+            border-bottom: 1px solid #e8e8e8;
+            border-top: none;
+
+            // border-color: transparent;
+            background: #F9F9F9;
+            &:first-of-type{
+               border-left: 1px solid #e8e8e8;
+            }
+            &.ant-tabs-tab-active {
+             border-bottom-color: #fff;
+             background: #fff;
+          }
+          }
+
+        }
+
+        .ant-tabs-bar;
+      }
+    }
   }
   .edit-label-type {
     font-size: 12px;