cnhis-design-vue 0.2.64-beta → 0.3.2-beta

package/packages/color-picker/src/color-picker.vue

@@ -1,191 +0,0 @@
-<template>
-  <div class="m-colorPicker" ref="colorPicker" @click="event => event.stopPropagation()">
-    <!-- 颜色显示小方块 -->
-    <div class="colorBtn" v-bind:style="`background-color: ${showColor}`" @click="openPanel" v-bind:class="{ disabled: disabled }"></div>
-    <!-- 颜色色盘 -->
-    <div class="box" ref="colorPickerBox" v-clickoutside="handleClickOutside" v-bind:class="{ open: openStatus }">
-      <div class="hd">
-        <div class="colorView" v-bind:style="`background-color: ${showPanelColor}`"></div>
-        <div class="defaultColor" @click="handleDefaultColor" @mouseover="hoveColor = defaultColor" @mouseout="hoveColor = null">
-          默认颜色
-        </div>
-      </div>
-      <div class="bd">
-        <h3>主题颜色</h3>
-        <ul class="tColor">
-          <li v-for="(color, index) of tColor" :key="index" v-bind:style="{ backgroundColor: color }" @mouseover="hoveColor = color" @mouseout="hoveColor = null" @click="updataValue(color)"></li>
-        </ul>
-        <ul class="bColor">
-          <li v-for="(item, index) of colorPanel" :key="index">
-            <ul>
-              <li v-for="(color, cindex) of item" :key="cindex" v-bind:style="{ backgroundColor: color }" @mouseover="hoveColor = color" @mouseout="hoveColor = null" @click="updataValue(color)"></li>
-            </ul>
-          </li>
-        </ul>
-        <h3>标准颜色</h3>
-        <ul class="tColor">
-          <li v-for="(color, index) of bColor" :key="index" v-bind:style="{ backgroundColor: color }" @mouseover="hoveColor = color" @mouseout="hoveColor = null" @click="updataValue(color)"></li>
-        </ul>
-        <a class="more" @click="triggerHtml5Color">更多颜色...</a>
-        <!-- 用以激活HTML5颜色面板 -->
-        <input type="color" ref="html5Color" v-model="html5Color" @change="updataValue(html5Color)" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-/**
- * @author ruanlin
- * @desc 一个颜色选择器
- * @time 2021-05-11
- */
-
-import create from '@/core/create';
-
-import Clickoutside from '@/utils/clickoutside';
-
-export default create({
-  name: 'color-picker',
-  directives: { Clickoutside },
-  props: {
-    // 当前颜色值
-    value: {
-      type: String,
-      required: true
-    },
-    // 默认颜色
-    defaultColor: {
-      type: String,
-      default: '#000000'
-    },
-    // 禁用状态
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      // 面板打开状态
-      openStatus: false,
-      // 鼠标经过的颜色块
-      hoveColor: null,
-      // 主题颜色
-      tColor: ['#000000', '#ffffff', '#eeece1', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c'],
-      // 颜色面板
-      colorConfig: [
-        ['#7f7f7f', '#f2f2f2'],
-        ['#0d0d0d', '#808080'],
-        ['#1c1a10', '#ddd8c3'],
-        ['#0e243d', '#c6d9f0'],
-        ['#233f5e', '#dae5f0'],
-        ['#632623', '#f2dbdb'],
-        ['#4d602c', '#eaf1de'],
-        ['#3f3150', '#e6e0ec'],
-        ['#1e5867', '#d9eef3'],
-        ['#99490f', '#fee9da']
-      ],
-      // 标准颜色
-      bColor: ['#c21401', '#ff1e02', '#ffc12a', '#ffff3a', '#90cf5b', '#00af57', '#00afee', '#0071be', '#00215f', '#72349d'],
-      html5Color: this.value
-    };
-  },
-  computed: {
-    // 显示面板颜色
-    showPanelColor() {
-      if (this.hoveColor) {
-        return this.hoveColor;
-      } else {
-        return this.showColor;
-      }
-    },
-    // 显示颜色
-    showColor() {
-      if (this.value) {
-        return this.value;
-      } else {
-        return this.defaultColor;
-      }
-    },
-    // 颜色面板
-    colorPanel() {
-      let colorArr = [];
-      for (let color of this.colorConfig) {
-        colorArr.push(this.gradient(color[1], color[0], 5));
-      }
-      return colorArr;
-    }
-  },
-  methods: {
-    openPanel(e) {
-      if (this.disabled) return;
-      this.openStatus = !this.openStatus;
-      const domNode = e.currentTarget;
-      const boxNode = this.$refs['colorPickerBox'];
-      const { left, bottom } = domNode && domNode.getBoundingClientRect();
-      boxNode.setAttribute('style', `left:${left}px;top:${bottom}px;`);
-    },
-    triggerHtml5Color() {
-      this.$refs.html5Color.click();
-    },
-    // 更新组件的值 value
-    updataValue(value) {
-      this.$emit('input', value);
-      this.$emit('change', value);
-      this.openStatus = false;
-    },
-    // 设置默认颜色
-    handleDefaultColor() {
-      this.updataValue(this.defaultColor);
-    },
-    // 格式化 hex 颜色值
-    parseColor(hexStr) {
-      if (hexStr.length === 4) {
-        hexStr = '#' + hexStr[1] + hexStr[1] + hexStr[2] + hexStr[2] + hexStr[3] + hexStr[3];
-      } else {
-        return hexStr;
-      }
-    },
-    // RGB 颜色 转 HEX 颜色
-    rgbToHex(r, g, b) {
-      let hex = ((r << 16) | (g << 8) | b).toString(16);
-      return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
-    },
-    // HEX 转 RGB 颜色
-    hexToRgb(hex) {
-      hex = this.parseColor(hex);
-      let rgb = [];
-      for (let i = 1; i < 7; i += 2) {
-        rgb.push(parseInt('0x' + hex.slice(i, i + 2)));
-      }
-      return rgb;
-    },
-    // 计算渐变过渡颜色
-    gradient(startColor, endColor, step) {
-      // 讲 hex 转换为 rgb
-      let sColor = this.hexToRgb(startColor);
-      let eColor = this.hexToRgb(endColor);
-
-      // 计算R\G\B每一步的差值
-      let rStep = (eColor[0] - sColor[0]) / step;
-      let gStep = (eColor[1] - sColor[1]) / step;
-      let bStep = (eColor[2] - sColor[2]) / step;
-
-      let gradientColorArr = [];
-      // 计算每一步的hex值
-      for (let i = 0; i < step; i++) {
-        gradientColorArr.push(this.rgbToHex(parseInt(rStep * i + sColor[0]), parseInt(gStep * i + sColor[1]), parseInt(bStep * i + sColor[2])));
-      }
-      return gradientColorArr;
-    },
-    handleClickOutside() {
-      this.openStatus = false;
-    }
-  }
-});
-</script>
-
-<style lang="less" scoped>
-@import './style.less';
-</style>

package/packages/color-picker/src/style.less

@@ -1,109 +0,0 @@
-.m-colorPicker {
-  position: relative;
-  text-align: left;
-  font-size: 14px;
-  display: inline-block;
-  outline: none;
-  ul,
-  li,
-  ol {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .colorBtn {
-    width: 15px;
-    height: 15px;
-  }
-  .colorBtn.disabled {
-    cursor: no-drop;
-  }
-  .box {
-    position: fixed;
-    width: 190px;
-    background: #fff;
-    border: 1px solid #ddd;
-    visibility: hidden;
-    border-radius: 2px;
-    margin-top: 2px;
-    padding: 10px;
-    padding-bottom: 5px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    box-sizing: content-box;
-    h3 {
-      margin: 0;
-      font-size: 14px;
-      font-weight: normal;
-      margin-top: 10px;
-      margin-bottom: 5px;
-      line-height: 1;
-      color: #333;
-    }
-    input {
-      visibility: hidden;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
-  }
-  .box.open {
-    visibility: visible;
-    opacity: 1;
-    z-index: 999;
-  }
-  .hd {
-    overflow: hidden;
-    line-height: 29px;
-    .colorView {
-      width: 100px;
-      height: 30px;
-      float: left;
-      transition: background-color 0.3s ease;
-    }
-    .defaultColor {
-      width: 80px;
-      float: right;
-      text-align: center;
-      border: 1px solid #ddd;
-      cursor: pointer;
-      color: #333;
-    }
-  }
-  .tColor {
-    li {
-      width: 15px;
-      height: 15px;
-      display: inline-block;
-      margin: 0 2px;
-      transition: all 0.3s ease;
-    }
-    li:hover {
-      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-      transform: scale(1.3);
-    }
-  }
-  .bColor {
-    li {
-      width: 15px;
-      display: inline-block;
-      margin: 0 2px;
-      li {
-        display: block;
-        width: 15px;
-        height: 15px;
-        transition: all 0.3s ease;
-        margin: 0;
-      }
-      li:hover {
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-        transform: scale(1.3);
-      }
-    }
-  }
-  .more {
-    cursor: pointer;
-    color: #1890ff;
-  }
-}

package/packages/comment/index.js

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

package/packages/comment/src/Comment.jsx

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

package/packages/config-provider/index.js

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

package/packages/config-provider/src/ConfigProvider.jsx

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

package/packages/date-picker/index.js

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

package/packages/date-picker/src/DatePicker.jsx

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

package/packages/date-picker/src/MonthPicker.jsx

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

package/packages/date-picker/src/RangePicker.jsx

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

package/packages/date-picker/src/WeekPicker.jsx

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

package/packages/descriptions/index.js

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

package/packages/descriptions/src/Descriptions.jsx

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

package/packages/descriptions/src/Item.jsx

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

package/packages/divider/index.js

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

package/packages/divider/src/Divider.jsx

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

package/packages/drag-layout/DragFormLeftItem.vue

@@ -1,173 +0,0 @@
-<template>
-  <div class="DragFormLeftItem">
-    <a-col
-      class="left-content"
-      :class="[element.extraField ? 'blue-border' : '', 'item-' + element.html_type]"
-      :label="element"
-    >
-      <!-- 文本域 -->
-      <div class="style-box" v-if="element.html_type === 'TEXTAREA'">
-        <a-textarea
-          disabled
-          :placeholder="element.fieldAlias || element.alias || element.name"
-        ></a-textarea>
-      </div>
-      <!-- 日期 -->
-      <div
-        class="style-box"
-        v-else-if="
-          element.html_type === 'DATE' ||
-            element.html_type === 'DATE-INPUT' ||
-            element.html_type === 'DATETIME-INPUT'
-        "
-      >
-        <a-date-picker
-          disabled
-          :placeholder="element.fieldAlias || element.alias || element.name"
-        />
-      </div>
-      <!-- 下拉 标签 -->
-      <div
-        class="style-box"
-        v-else-if="
-          element.html_type === 'SELECT' ||
-            element.html_type === 'SEARCH' ||
-            element.html_type === 'SEARCH_MORE' ||
-            element.html_type === 'PHONE_TYPE' ||
-            element.html_type === 'IDCARD_TYPE' ||
-            element.html_type === 'LABEL'
-        "
-      >
-        <a-select disabled />
-      </div>
-      <!-- 单选 -->
-      <div class="style-box" v-else-if="element.html_type === 'RADIO'">
-        <a-radio disabled defaultChecked>
-          {{ getI18nText("1.2.5.5", "男") }}
-        </a-radio>
-        <a-radio disabled :defaultChecked="false">
-          {{ getI18nText("1.2.5.6", "女") }}
-        </a-radio>
-      </div>
-      <!-- 多选 -->
-      <div
-        class="style-box"
-        v-else-if="element.html_type === 'CHECKBOX' || element.html_type === 'CHECKBOX_BLOCK'"
-      >
-        <a-checkbox defaultChecked disabled />
-        <a-checkbox defaultChecked disabled />
-      </div>
-      <!-- 级联 -->
-      <div
-        class="style-box"
-        v-else-if="
-          element.html_type === 'SEARCH_CASCADE' || element.html_type === 'LEVEL_SEARCH_CASCADE'
-        "
-      >
-        <a-select :defaultValue="getI18nText('1.9.275', '省/市/区')" disabled />
-      </div>
-      <div class="style-box" v-else-if="element.html_type === 'PHONE_TYPE'">
-        <a-input disabled placeholder="+86"></a-input>
-      </div>
-      <div class="style-box" v-else>
-        <a-input
-          disabled
-          :placeholder="element.fieldAlias || element.alias || element.name"
-        ></a-input>
-      </div>
-      {{ element.fieldAlias || element.alias || element.name }}
-    </a-col>
-  </div>
-</template>
-<script>
-import {
-  DatePicker,
-  Button,
-  Col,
-  Input,
-  Radio,
-  Select,
-  Checkbox,
-  InputNumber
-} from "ant-design-vue";
-import I18nm from "./I18n-mixins";
-export default {
-  name: "DragFormLeftItem",
-  components: {
-    [DatePicker.name]: DatePicker,
-    [Button.name]: Button,
-    [Select.name]: Select,
-    [Select.Option.name]: Select.Option,
-    [Input.name]: Input,
-    [InputNumber.name]: InputNumber,
-    [Input.TextArea.name]: Input.TextArea,
-    [Checkbox.name]: Checkbox,
-    [Radio.name]: Radio,
-    [Col.name]: Col
-  },
-  mixins: [I18nm],
-  props: ["element"],
-  data() {
-    return {};
-  },
-
-  computed: {},
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {},
-
-  // 方法
-  methods: {}
-};
-</script>
-<style lang="less" scoped>
-.DragFormLeftItem {
-  .left-content {
-    width: 100%;
-    margin-bottom: 16px;
-    overflow: hidden;
-    cursor: pointer;
-    color: #2e2e2e;
-    .style-box {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      width: 100%;
-      height: 60px;
-      padding: 0 8px;
-      margin-bottom: 8px;
-      background: #f3f5f8;
-      > input {
-        width: 85%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        cursor: pointer !important;
-      }
-      .ant-checkbox-disabled {
-        cursor: pointer !important;
-      }
-      .ant-radio-wrapper-disabled {
-        cursor: pointer !important;
-      }
-      input[type="radio"][disabled],
-      input[type="checkbox"][disabled],
-      input[type="radio"].disabled,
-      input[type="checkbox"].disabled {
-        cursor: pointer !important;
-      }
-      .ant-radio-wrapper {
-        margin-right: 0;
-      }
-      /deep/ .ant-select {
-        width: 75%;
-        &.ant-select-disabled .ant-select-selection,
-        &.ant-select-disabled {
-          cursor: pointer !important;
-        }
-      }
-    }
-  }
-}
-</style>