meixioacomponent 0.1.86 → 0.1.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.1.86",
+  "version": "0.1.89",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseTimeLine/baseTimeLine.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="base-time-line-wrap">
+    <div
+      class="base-time-line-item-wrap"
+      :key="index"
+      v-for="(item, index) in timeLineSource"
+    >
+      <div class="base-time-line-left">
+        <baseTimeLineLeft :timeLineItem="item"></baseTimeLineLeft>
+      </div>
+      <div class="base-time-line-right">
+        <baseTimeLineRight
+          :timeLineItem="item"
+          :content="item.content"
+          :customComponent="customComponent"
+        ></baseTimeLineRight>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseTimeLineLeft from "./baseTimeLineLeft.vue";
+import baseTimeLineRight from "./baseTimeLineRight.vue";
+export default {
+  name: "baseTimeLine",
+  data() {
+    return {};
+  },
+  props: {
+    hasTimeWeek: {
+      type: Boolean,
+      default: true,
+    },
+
+    timeLineSource: {
+      type: Array,
+      require: true,
+    },
+
+    customComponent: {
+      default: false,
+    },
+  },
+  components: {
+    baseTimeLineLeft,
+    baseTimeLineRight,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-time-line-wrap {
+  width: auto;
+  height: auto;
+  .base-time-line-item-wrap {
+    width: 100%;
+    height: auto;
+    display: flex;
+  }
+}
+</style>

package/packages/components/base/baseTimeLine/baseTimeLineLeft.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="base-time-line-left-wrap"
+    :class="{
+      'has-time-Week': hasTimeWeek,
+    }"
+  >
+    <div class="time-week-wrap" v-if="hasTimeWeek">
+      <span>{{ hasTimeWeekText }}</span>
+    </div>
+    <div
+      class="base-time-line-point-wrap"
+      :class="{ 'line-type-icon': timeLineItem.icon }"
+    >
+      <div class="base-time-line-point">
+        <base-icon
+          class="line-icon"
+          :size="`s`"
+          :plain="true"
+          :event="false"
+          v-if="timeLineItem.icon"
+          :name="timeLineItem.icon"
+        ></base-icon>
+      </div>
+      <span class="point-line"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    timeLineItem: {
+      require: true,
+    },
+    hasTimeWeek: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    hasTimeWeekText() {
+      let day = new Date(this.$props.timeLineItem.time);
+      let weekText = "";
+      let week = day.getDay();
+      switch (week) {
+        case 0:
+          weekText = `星期天`;
+          break;
+        case 1:
+          weekText = `星期一`;
+          break;
+        case 2:
+          weekText = `星期二`;
+          break;
+        case 3:
+          weekText = `星期三`;
+          break;
+        case 4:
+          weekText = `星期四`;
+          break;
+        case 5:
+          weekText = `星期五`;
+          break;
+        case 6:
+          weekText = `星期六`;
+          break;
+
+        default:
+          break;
+      }
+      return `${day.getMonth() + 1}月${day.getDate()}日 ${weekText}`;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-time-line-left-wrap {
+  width: 50px;
+  height: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  justify-content: flex-end;
+  .time-week-wrap {
+    padding: 0px var(--padding-5);
+    span {
+      color: var(--font-color-d);
+      font-size: var(--font-size-s);
+      font-weight: var(--font-weight-kg);
+    }
+  }
+  .base-time-line-point-wrap {
+    width: auto;
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    .base-time-line-point {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: white;
+      border: 5px solid var(--color-primary);
+    }
+
+    .point-line {
+      width: 1px;
+      display: block;
+      height: calc(100% - 18px);
+      background: var(--color-gray-d);
+    }
+  }
+  .line-type-icon {
+    .base-time-line-point {
+      width: 20px;
+      height: 20px;
+      border: 0px;
+      display: flex;
+      align-items: center;
+      flex-flow: row nowrap;
+      justify-content: center;
+      background: var(--color-primary);
+      .line-icon {
+        /deep/ i {
+          color: var(--text-white) !important;
+        }
+      }
+    }
+    .point-line {
+      height: calc(100% - 20px);
+    }
+  }
+}
+.has-time-Week {
+  width: 150px;
+}
+</style>

package/packages/components/base/baseTimeLine/baseTimeLineRight.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="base-time-line-right-wrap">
+    <span class="time-line-content" v-if="!customComponent">{{ content }}</span>
+    <div class="time-line-custom-wrap" ref="timeLineCustomWrap"></div>
+  </div>
+</template>
+
+<script>
+import DynamicMount from "../../dynamicmount/DynamicMount";
+export default {
+  data() {
+    return {};
+  },
+
+  mounted() {
+    if (this.$props.customComponent) {
+      this.$nextTick(() => {
+        this.init();
+      });
+    }
+  },
+  props: {
+    customComponent: {
+      default: false,
+    },
+    content: {
+      type: String,
+      require: true,
+    },
+    timeLineItem: {},
+  },
+  methods: {
+    init() {
+      let component = new DynamicMount({
+        vueComponent: this.$props.customComponent,
+        mountedDom: this.$refs.timeLineCustomWrap,
+        componentProps: this.$props.timeLineItem,
+      });
+
+      component.init();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-time-line-right-wrap {
+  width: auto;
+  height: auto;
+  padding: 0px var(--padding-5);
+  .time-line-content {
+    color: var(--font-color-d);
+    size: var(--font-size-base);
+  }
+}
+</style>

package/packages/components/base/baseTimeLine/index.js

@@ -0,0 +1,7 @@
+import baseTimeLine from "./baseTimeLine.vue";
+
+baseTimeLine.install = function (Vue) {
+  Vue.component(baseTimeLine.name, baseTimeLine);
+};
+
+export default baseTimeLine;

package/packages/components/index.js

@@ -31,6 +31,7 @@ import baseForm from "./proForm/proForm/index";
 import baseFormWrap from "./proForm/proFormWrap/index";
 import baseProTable from "./proPageTable/index";
 import baseMoverVerifiBar from "./base/baseMoverVerifiBar";
+import baseTimeLine from "./base/baseTimeLine";
 // js 文件相关
 import DynamicMount from "./dynamicmount/index.js";
 import componentConfig from "../config/componentConfig";
@@ -74,6 +75,7 @@ const meixicomponents = [
   baseFormWrap,
   baseProTable,
   baseMoverVerifiBar,
+  baseTimeLine,
 ];
 
 const install = (Vue) => {
@@ -124,6 +126,7 @@ export default {
   baseFormWrap,
   baseProTable,
   baseMoverVerifiBar,
+  baseTimeLine,
   SelectStore,
   useImg,
   useFixedHeader,

package/packages/components/proPageTable/oa_pro_table.vue

@@ -697,7 +697,7 @@ export default {
     // 判断表格的行能否点击
     selected(row, index) {
       let _tableCheckboxConfig = this.$props.tableCheckboxConfig;
-      if (_tableCheckboxConfig.canSelected) return true;
+      if (!_tableCheckboxConfig.canSelected) return true;
 
       return _tableCheckboxConfig.canSelected(row, index);
     },