cnhis-design-vue 0.2.63-beta → 0.3.1-beta

package/packages/tabs/index.js

@@ -1,18 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Tabs from './src/Tabs';
-import TabPane from './src/TabPane';
-
-// 为组件提供 install 安装方法，供按需引入
-Tabs.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Tabs.name, Tabs);
-  Vue.component(TabPane.name, TabPane);
-};
-
-Object.assign(Tabs, {
-  TabPane
-});
-
-// 默认导出组件
-export default Tabs;

package/packages/tabs/src/TabPane.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Tabs } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'tab-pane',
-  extends: Tabs.TabPane
-});

package/packages/tabs/src/Tabs.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Tabs } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'tabs',
-  extends: Tabs
-});

package/packages/tag/index.js

@@ -1,21 +0,0 @@
-// 导入组件
-import Base from '../base';
-import Tag from './src/Tag';
-import CheckableTag from './src/CheckableTag';
-import TagGroup from './src/TagGroup';
-
-// 为组件提供 install 安装方法，供按需引入
-Tag.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Tag.name, Tag);
-  Vue.component(CheckableTag.name, CheckableTag);
-  Vue.component(TagGroup.name, TagGroup);
-};
-
-Object.assign(Tag, {
-  CheckableTag,
-  TagGroup
-});
-
-// 默认导出组件
-export default Tag;

package/packages/tag/src/CheckableTag.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Tag } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'checkable-tag',
-  extends: Tag.CheckableTag
-});

package/packages/tag/src/Tag.jsx

@@ -1,11 +0,0 @@
-/**
- * @author pengpeng
- * @desc 全继承antd组件，后期再扩展
- * @time 2021-05-13
- */
-import { Tag } from 'ant-design-vue';
-import create from '@/core/create';
-export default create({
-  name: 'tag',
-  extends: Tag
-});

package/packages/tag/src/TagGroup.vue

@@ -1,622 +0,0 @@
-<template>
-  <div class="label-wrap">
-    <div class="left-label-wrap">
-      <c-tabs
-        hideAdd
-        :activeKey="labelAnchorKey"
-        @change="labelAnchorTabsOnChange"
-        tab-position="left"
-        :class="['self-tabs', `self-tabs-${color}`]"
-      >
-        <template v-for="v in labelList">
-          <c-tab-pane :key="v.curKey">
-            <span slot="tab">
-              {{ v.title }}
-            </span>
-          </c-tab-pane>
-        </template>
-      </c-tabs>
-    </div>
-
-    <div class="right-label-wrap">
-      <a-anchor
-        v-show="false"
-        :getContainer="anchorGetContainer"
-        @click="handleAnchorClick"
-        @change="anchorOnChange"
-      >
-        <template v-for="(v, i) in labelList">
-          <a-anchor-link :key="v.curKey" :href="`#${v.curKey}`" :title="i" />
-        </template>
-      </a-anchor>
-      <div v-for="(v, k) in labelList" :key="k" class="edit-label-content">
-        <div class="edit-label" :id="v.curKey">
-          {{ v.title }}
-          <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, v.curKey)"
-              :key="item.labelId"
-              :class="[{ 'sys-label-tag': item.isPublic && item.isPublic == 1 }, `label-tag-${color}`]"
-            >
-              <a-tooltip placement="topLeft">
-                <template slot="title">
-                  <span>{{ item.labelName }}</span>
-                </template>
-                {{ item.labelName }}
-              </a-tooltip>
-              <a-icon
-               class="label-close" 
-               v-show="!(item.isPublic && item.isPublic == 1)" 
-               type="close" 
-               @click.native.stop="handleDelLabel(item, v)"
-              />
-            </a-checkable-tag>
-            <a-button
-              v-if="isEdit && !v.isNoAdd"
-              type="dashed"
-              :class="['label-add', `label-tag-${color}`]"
-              v-show="!v.showAdd"
-              @click="handleAddLabel($event, v)"
-            >
-              <a-icon type="plus" />
-              标签
-            </a-button>
-            <a-input
-              v-if="isEdit && !v.isNoAdd"
-              :class="['label-add', 'add-input', `label-tag-${color}`]"
-              v-model.trim="v.addVal"
-              v-show="v.showAdd"
-              @blur="hanldeBlur($event, v, v.curKey)"
-            >
-              <a-icon slot="suffix" type="close" @click.native.stop="clearaddVal($event, v)" />
-            </a-input>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import create from "@/core/create";
-import { Tooltip, Icon, Button, Input, Tag, Anchor } from "ant-design-vue";
-import Tabs from '~/tabs';
-// import Anchor from '~/anchor';
-
-export default create({
-  name: 'tag-group',
-  components: {
-    [Input.name]: Input,
-    [Icon.name]: Icon,
-    [Tabs.name]: Tabs,
-    [Anchor.name]: Anchor,
-    [Anchor.Link.name]: Anchor.Link,
-    [Tooltip.name]: Tooltip,
-    [Button.name]: Button,
-    [Tag.name]: Tag,
-    [Tag.CheckableTag.name]: Tag.CheckableTag,
-  },
-
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    color: {
-      type: String,
-      default: 'blue',
-    },
-    isEdit: {
-      // 是否可以编辑
-      type: Boolean,
-      default: true
-    },
-  },
-
-  watch: {
-    list: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (val && val.length > 0) {
-          // this.labelList = [...val];
-          this.labelList = JSON.parse(JSON.stringify(val));
-          this.init();
-        }
-      }
-    },
-  },
-
-  data() {
-    return {
-      labelList: [],
-      labelAnchorKey: '',
-      labelSelectedEdit: [], // 编辑状态的label值
-      cacheAnchorKey: ''
-    }
-  },
-
-  created() {
-  },
-
-  methods: {
-    init() {
-      this.labelAnchorKey = this.labelList[0].curKey;
-    },
-    labelAnchorTabsOnChange(key) {
-      if (!key) return;
-      setTimeout(() => {
-        let anchorKey = "#" + key;
-        let curLink;
-        curLink = this.$el.querySelector("a[href='" + anchorKey + "']");
-        curLink && curLink.click();
-        this.labelAnchorKey = key;
-      }, 32);
-    },
-    handleLabelChange(v, d, labelGroup, k) {
-      const list = labelGroup.itemList;
-      const multipleChoice = labelGroup.multipleChoice;
-      let selectedList = this.labelSelectedEdit || [];
-      if (v) {
-        if (selectedList.some(n => n.labelId == d.labelId)) {
-          return;
-        }
-        // 单选处理
-        if (multipleChoice == 2) {
-          const { typeId, labelId } = d;
-          selectedList = selectedList.filter(item => item.typeId !== typeId);
-          list.forEach(item => {
-            if (item.labelId !== labelId) {
-              item.isSelect = false;
-            }
-          });
-        }
-        selectedList.push(d);
-      } else {
-        const fdIndex = selectedList.findIndex(n => n.labelId == d.labelId);
-        if (fdIndex != -1) {
-          selectedList.splice(fdIndex, 1);
-        }
-      }
-      this.labelSelectedEdit = [...selectedList];
-      // console.log(this.labelSelectedEdit);
-      this.$emit('changeLabel', { val: this.labelSelectedEdit, curKey: k });
-    },
-    handleDelLabel(v, o) {
-      let selectList = this.labelSelectedEdit || [];
-      if (selectList && selectList.length) {
-        const delIndex = selectList.findIndex(n => n.labelId == v.labelId);
-        delIndex != -1 && selectList.splice(delIndex, 1);
-      }
-      const delI = o.itemList.findIndex(n => n.labelId == v.labelId);
-      delI != -1 && o.itemList.splice(delI, 1);
-      this.$emit('delLabel', { curKey: o.curKey, labelId: v.labelId });
-    },
-    clearaddVal(e, v) {
-      // e.preventDefault();
-      v.addVal = "";
-    },
-    handleAddLabel($event, item) {
-      item.showAdd = true;
-      const nextInput = $event.target.nextElementSibling;
-      this.$nextTick(() => {
-        nextInput?.firstChild?.focus();
-      }, 20);
-    },
-    hanldeBlur($event, d, k) {
-      setTimeout(() => {
-        // const className = $event.relatedTarget.className;
-        // if (className.includes("ant-modal-close") || className.includes("ant-btn")) {
-        //   d.showAdd = false;
-        //   d.addVal = "";
-        //   return;
-        // }
-        if (d.addVal) {
-          this.handleSaveLabel(d, k);
-        } else {
-          d.showAdd = false;
-        }
-      }, 150);  
-    },
-    handleSaveLabel(v, k) {
-      // 重复校验
-      let privateLabel = v.itemList.filter(item => {
-        return !(item.isPublic && item.isPublic == 1);
-      });
-      let hasRepetition = !!privateLabel.find(item => {
-        return item.labelName === v.addVal;
-      });
-      if (hasRepetition) {
-        this.$message.error("标签名称重复!");
-        return false;
-      }
-      // let parentColor = "";
-      // if (v.itemList?.length) {
-      //   parentColor = v.itemList[0].parentColor || v.parentColor || "";
-      // }
-      v.showAdd = false;
-      // 此处触发新增方法
-      const val = v.addVal;
-      v.addVal = '';
-      v.itemList.push({
-        labelId: `_${Date.now().toString()}`,
-        isSelect: false,
-        labelName: val
-      })
-      // this.$set(this.labelList, itemList, );
-      this.$emit('addLabel', {val, curKey: k});
-    },
-    anchorGetContainer() {
-      return this.$el?.querySelector(".right-label-wrap");
-    },
-    handleAnchorClick(e) {
-      e.preventDefault();
-    },
-    anchorOnChange(link) {
-      if (!link) return;
-      let curLink = link.slice(1);
-      this.cacheAnchorKey = curLink;
-    },
-  }
-})
-</script>
-
-<style lang="less">
-  @color-blue: #2d7aff;
-  @bg-blue: rgba(85, 133, 245, 1);
-  @color-yellow: #ff6a00;
-  @bg-yellow: rgba(204, 153, 0, 1);
-  @color-green: rgba(0, 204, 204, 1);
-  // @bg-green: rgba(204, 153, 0, 1);
-  .left-label-wrap {
-    .self-tabs {
-      &.self-tabs-blue {
-        .ant-tabs-tab-active {
-          color: @color-blue;
-        }
-        .ant-tabs-tab:hover {
-          color: @color-blue;
-        }
-        .ant-tabs-ink-bar {
-          background-color: @bg-blue;
-        }
-      }
-
-      &.self-tabs-yellow {
-        .ant-tabs-tab-active {
-          color: @color-yellow;
-        }
-        .ant-tabs-tab:hover {
-          color: @color-yellow;
-        }
-        .ant-tabs-ink-bar {
-          background-color: @color-yellow;
-        }
-      }
-
-      &.self-tabs-green {
-        .ant-tabs-tab-active {
-          color: @color-green;
-        }
-        .ant-tabs-tab:hover {
-          color: @color-green;
-        }
-        .ant-tabs-ink-bar {
-          background-color: @color-green;
-        }
-      }
-    }
-  }
-  .edit-label-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    font-size: 14px;
-
-    .edit-label {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0 5px 0 16px;
-      word-wrap: normal;
-      color: #212121;
-      font-size: 16px;
-    }
-
-    .edit-content {
-      flex: 1;
-      padding: 8px 0 0 16px;
-      width: 100%;
-
-      .label-content {
-        display: flex;
-        flex-wrap: wrap;
-        line-height: 34px;
-
-        .label-add {
-          position: relative;
-          cursor: pointer;
-          padding-right: 10px;
-          height: 32px;
-          min-width: 64px;
-          max-width: 108px;
-          margin-bottom: 10px;
-
-          &.add-input {
-            padding: 0;
-
-            .ant-input {
-              padding-right: 20px;
-            }
-
-            &.label-tag-blue {
-              .ant-input:focus {
-                border-color: @bg-blue;
-                box-shadow: 0 0 0 2px rgba(85, 133, 245, .2);
-              }
-            }
-            &.label-tag-yellow {
-              .ant-input:focus {
-                border-color: @bg-yellow;
-                box-shadow: 0 0 0 2px rgba(204, 153, 0, .2);
-              }
-            }
-            &.label-tag-green {
-              .ant-input:focus {
-                border-color: @color-green;
-                box-shadow: 0 0 0 2px rgba(0, 204, 204, .2);
-              }
-            }
-
-            .ant-input-suffix {
-              right: 6px;
-            }
-          }
-
-          &.label-tag-blue:hover {
-            border-color: @color-blue;
-            color: @color-blue;
-          }
-          &.label-tag-yellow:hover {
-            border-color: @color-yellow;
-            color: @color-yellow
-          }
-          &.label-tag-green:hover {
-            border-color: @color-green;
-            color: @color-green;
-          }
-
-          .ant-input:not(:last-child) {
-            padding-right: 14px;
-          }
-
-          .label-close {
-            font-size: 12px;
-          }
-          .anticon-close {
-            position: unset;
-            color: rgba(102, 102, 102, 0.6) !important;
-            font-size: 12px;
-            &:hover {
-              color: #666666 !important;
-            }
-          }
-        }
-
-        // .label-tag-blue {
-        //   background: rgba(255, 255, 255, 1);
-        //   color: @bg-blue;
-        //   border-color: @bg-blue;
-        // }
-
-        // .label-tag-yellow {
-        //   color: rgb(255, 255, 255);
-        //   border-color: rgb(204, 153, 0);
-        //   background: @bg-yellow
-        // }
-
-        // .label-tag-green {
-        //   color: rgba(255, 255, 255, 1);
-        //   border-color: @color-green;
-        //   background: @color-green;
-        // }
-      }
-
-      .ant-tag-checkable {
-        cursor: pointer;
-        position: relative;
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        min-width: 108px;
-        max-width: 108px;
-        // border: 1px solid rgba(85, 133, 245, 0.2);
-        // background: rgba(85, 133, 245, 0.2);
-        // color: #5585f5;
-        color: rgba(33, 33, 33, 0.6);
-        background: rgb(250, 250, 250);
-        border-color: rgba(213, 213, 213, 0.8);
-        font-size: 14px;
-        border-radius: 4px;
-        margin-bottom: 8px;
-        box-sizing: border-box;
-
-        span {
-          display: inline-block;
-          width: 80px;
-          height: 100%;
-          line-height: 30px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        &.label-tag-blue {
-          // border-color: rgba(85, 133, 245, 0.2);
-          // background: rgba(85, 133, 245, 0.2);
-          // color: @bg-blue;
-
-          .label-close {
-            color: @bg-blue;
-          }
-
-          &.ant-tag-checkable-checked {
-            background: @bg-blue;
-          }
-        }
-
-        &.label-tag-yellow {
-          // color: rgb(204, 153, 0);
-          // border-color: rgb(204, 153, 0);
-          // background: rgba(204, 153, 0, 0.2);
-
-          .label-close {
-            color: rgb(204, 153, 0);
-          }
-
-          &.ant-tag-checkable-checked {
-            background: @bg-yellow
-          }
-        }
-
-        &.label-tag-green {
-          // color: @color-green;
-          // border-color: @color-green;
-          // background: rgba(0, 204, 204, 0.2);
-
-          .label-close {
-            color: @color-green;
-          }
-
-          &.ant-tag-checkable-checked {
-            background: @color-green;
-          }
-        }
-      }
-
-      .ant-tag-checkable-checked {
-        height: 32px;
-        line-height: 32px;
-        text-align: center;
-        width: 64px;
-        background: #5585f5;
-        color: #fff !important;
-        &.sys-label-tag {
-          width: 100%;
-        }
-
-        .label-close {
-          color: #fff !important;
-        }
-      }
-      .ant-btn-dashed {
-        color: #a6a6a6;
-        width: 104px;
-        padding: 0;
-        border-color: rgba(0, 0, 0, 0.2);
-      }
-      .label-close {
-        color: rgba(102, 102, 102, 0.6) !important;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
-        font-size: 12px;
-        &:hover {
-          color: #666666 !important;
-        }
-      }
-    }
-  }
-</style>
-<style lang="less" scoped>
-  .label-disable-wrap {
-    width: 100%;
-    font-size: 14px;
-    line-height: 20px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .label-disable-img {
-      width: 320px;
-      height: 248px;
-    }
-
-    .label-disable-title {
-      color: #2e2e2e;
-      margin-bottom: 5px;
-    }
-
-    .label-disable-desc {
-      color: #969696;
-    }
-  }
-  .label-wrap {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
-
-  .left-label-wrap {
-    width: 160px;
-    height: 404px;
-    max-height: 404px;
-    &.total-left-label-wrap {
-      height: calc(100vh - 109px);
-      max-height: calc(100vh - 109px);
-    }
-    /deep/.ant-tabs {
-      height: 100%;
-      .ant-tabs-nav-container {
-        padding: 0;
-      }
-      .ant-tabs-left-bar {
-        width: 100%;
-        .ant-tabs-tab {
-          text-align: left;
-        }
-      }
-      .ant-tabs-tab-prev,
-      .ant-tabs-tab-next {
-        display: none !important;
-      }
-      .ant-tabs-nav-wrap {
-        overflow-y: auto;
-        color: #212121;
-        .ant-tabs-tab {
-          padding: 12px 12px 12px 16px;
-          margin: 0px;
-        }
-      }
-      .ant-tabs-nav .ant-tabs-tab-active {
-        background-color: #f2f2f2;
-      }
-    }
-  }
-  .right-label-wrap {
-    flex: 1;
-    height: 404px;
-    max-height: 404px;
-    overflow-y: auto;
-    &.total-right-label-wrap {
-      max-height: calc(100vh - 109px);
-    }
-  }
-
-  .edit-label-type {
-    font-size: 12px;
-    margin-left: 4px;
-  }
-</style>