doway-coms 2.2.15 → 2.2.16

package/packages/BaseGantt/src/index.vue

@@ -7,31 +7,48 @@
       <div>
         <a-space>
           <a-radio-group
-            :size="'small'"
-            v-model="timeViewValue"
-            button-style="solid"
-            @change="timeViewChange"
+              :size="'small'"
+              v-model="timeViewValue"
+              button-style="solid"
+              @change="timeViewChange"
           >
-            <a-radio-button value="day">天</a-radio-button>
-            <a-radio-button value="1">1小时</a-radio-button>
-            <a-radio-button value="2">2小时</a-radio-button>
-            <a-radio-button value="4">4小时</a-radio-button>
-            <a-radio-button value="8">8小时</a-radio-button>
-            <a-radio-button value="12">12小时</a-radio-button>
+            <a-radio-button value="day">
+              天
+            </a-radio-button>
+            <a-radio-button value="1">
+              1小时
+            </a-radio-button>
+            <a-radio-button value="2">
+              2小时
+            </a-radio-button>
+            <a-radio-button value="4">
+              4小时
+            </a-radio-button>
+            <a-radio-button value="8">
+              8小时
+            </a-radio-button>
+            <a-radio-button value="12">
+              12小时
+            </a-radio-button>
           </a-radio-group>
         </a-space>
       </div>
     </div>
     <vxe-grid
-      border
-      show-header-overflow
-      ref="headDay"
-      class="head-grid"
-      :size="'small'"
-      header-cell-class-name="header-cell-day"
+        border
+        show-header-overflow
+        ref="headDay"
+        class="head-grid"
+        :size="'small'"
+        header-cell-class-name="header-cell-day"
     >
       <template #customSearchHeader>
-        <vxe-input v-model="searchValue" placeholder="搜索" type="search" @input="onSearch"></vxe-input>
+        <vxe-input
+            v-model="searchValue"
+            placeholder="搜索"
+            type="search"
+            @input="onSearch"
+        ></vxe-input>
       </template>
       <template #dateWeekHeader="{ column }">
         <div>
@@ -41,13 +58,14 @@
       </template>
     </vxe-grid>
     <vxe-grid
-      border
-      show-header-overflow
-      ref="headHour"
-      class="head-grid"
-      :size="'small'"
-      v-show="hourCols.length > 0"
-    ></vxe-grid>
+        border
+        show-header-overflow
+        ref="headHour"
+        class="head-grid"
+        :size="'small'"
+        v-show="hourCols.length > 0"
+    >
+    </vxe-grid>
 
     <!-- <div class="gantt-line-area" ref="lineArea">
       <div
@@ -56,11 +74,11 @@
         :key="loopLine"
         :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
       ></div>
-    </div>-->
+    </div> -->
     <div
-      class="gantt-bar-tooltip"
-      v-if="ganttBarTooltip.show === true"
-      :style="{
+        class="gantt-bar-tooltip"
+        v-if="ganttBarTooltip.show === true"
+        :style="{
         left: ganttBarTooltip.left + 'px',
         top: ganttBarTooltip.top + 'px'
       }"
@@ -68,48 +86,47 @@
       <slot name="itemTip" :item="ganttBarTooltip.item"></slot>
     </div>
     <vxe-grid
-      border
-      resizable
-      auto-resize
-      ref="bodyGrid"
-      show-overflow
-      class="mytable-scrollbar"
-      :show-header="false"
-      :size="'small'"
-      :height="computedHeight"
-      :row-config="{
+        border
+        resizable
+        auto-resize
+        ref="bodyGrid"
+        show-overflow
+        class="mytable-scrollbar"
+        :show-header="false"
+        :size="'small'"
+        :height="computedHeight"
+        :row-config="{
         isCurrent: isCurrent,
-        isHover: true,
+        isHover: true
       }"
-      :treeConfig="treeConfig"
-      :cell-class-name="cellClassName"
-      :row-class-name="rowClassName"
-      @cell-click="cellClick"
-      @scroll="bodyScroll"
-      :loading="loading"
-      @filter-change="filterChangeEvent"
-      @toggle-tree-expand="toggleTreeExpand"
-      :checkbox-config="checkboxConfig"
+        :treeConfig="treeConfig"
+        :cell-class-name="cellClassName"
+        :row-class-name="rowClassName"
+        @cell-click="cellClick"
+        @scroll="bodyScroll"
+        :loading="loading"
+        @filter-change="filterChangeEvent"
+        @toggle-tree-expand="toggleTreeExpand"
     >
       <template #content="{ row, rowIndex }">
         <div>
           <div class="gantt-line-area" v-if="rowIndex === 0" ref="lineArea">
             <div
-              class="gantt-line"
-              v-for="loopLine in lines"
-              :key="loopLine"
-              :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
+                class="gantt-line"
+                v-for="loopLine in lines"
+                :key="loopLine"
+                :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
             ></div>
           </div>
           <div
-            v-for="loopItem in row.items"
-            :key="loopItem.id"
-            :name="'gantt-bar'+loopItem.taskId"
-            :id="'gantt-bar'+loopItem.id"
-            class="gantt-bar"
-            @mouseenter="ganttBarMouseEnter($event, loopItem, rowIndex)"
-            @mouseleave="ganttBarMouseLeave($event, loopItem)"
-            :style="{
+              v-for="loopItem in row.items"
+              :key="loopItem.id"
+              :name="'gantt-bar'+loopItem.taskId"
+              :id="'gantt-bar'+loopItem.id"
+              class="gantt-bar"
+              @mouseenter="ganttBarMouseEnter($event, loopItem, rowIndex)"
+              @mouseleave="ganttBarMouseLeave($event, loopItem)"
+              :style="{
               marginLeft: loopItem.left + 'px',
               width: loopItem.width + 'px'
             }"
@@ -127,22 +144,22 @@
 
 <script>
 import { Space, Radio } from "ant-design-vue";
-import XEUtils from "xe-utils";
-import moment from "moment";
-import draggable from "vuedraggable";
-import resizeDetector from "element-resize-detector";
+import XEUtils from 'xe-utils'
+import moment from 'moment'
+import draggable from 'vuedraggable'
+import resizeDetector from 'element-resize-detector';
 export default {
   name: "BaseGantt",
   components: {
     draggable,
-    "a-space": Space,
-    "a-radio-button": Radio.Button,
-    "a-radio-group": Radio.Group
+    'a-space': Space,
+    'a-radio-button': Radio.Button,
+    'a-radio-group': Radio.Group,
   },
   data() {
     return {
-      searchValue: "",
-      timeViewValue: "day",
+      searchValue: '',
+      timeViewValue: 'day',
       loading: false,
       rowColData: {},
       minDate: null,
@@ -164,11 +181,11 @@ export default {
         left: 0,
         top: 0,
         item: {},
-        color: ""
+        color: ''
       },
       rows: [],
-      weekDay: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-    };
+      weekDay: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    }
   },
   props: {
     showSeachHeader: {
@@ -181,15 +198,15 @@ export default {
     },
     timeValue: {
       type: String,
-      default: "day"
+      default: 'day'
     },
     height: {
-      default: "auto"
+      default: 'auto'
     },
     leftCols: {
       type: Array,
       default: function() {
-        return [{ field: "eqp", width: 100, fixed: "left" }];
+        return [{ field: 'eqp', width: 100, fixed: 'left' }]
       }
     },
     cellClassName: {
@@ -200,41 +217,34 @@ export default {
       type: Function,
       default: function() {}
     },
-    treeConfig: {
-      type: Object,
-      default: function() {
-        return null;
-      }
-    },
-    checkboxConfig: {
+    treeConfig:{
       type: Object,
       default: function() {
-        return null;
+        return null
       }
-    },
+    }
   },
   computed: {
     computedHeight: function() {
-      return this.height - this.headerHeight;
+      return this.height - this.headerHeight
     }
   },
   mounted() {
+
     let erd = resizeDetector({
-      strategy: "scroll"
+      strategy: 'scroll'
     });
-    let gridBodyDiv = this.$refs.bodyGrid.$el.getElementsByClassName(
-      "vxe-table--body"
-    )[0];
-    let vm = this;
+    let gridBodyDiv = this.$refs.bodyGrid.$el.getElementsByClassName('vxe-table--body')[0]
+    let vm  = this
     erd.listenTo(gridBodyDiv, () => {
-      vm.lineHeight = gridBodyDiv.clientHeight;
+             vm.lineHeight = gridBodyDiv.clientHeight
     });
-    this.timeViewValue = this.timeValue;
+    this.timeViewValue = this.timeValue
   },
   created() {},
   methods: {
-    toggleTreeExpand(scope) {
-      // console.debug(this.$refs.bodyGrid.$el.getElementsByClassName('vxe-table--body')[0].clientHeight)
+    toggleTreeExpand(scope){
+        // console.debug(this.$refs.bodyGrid.$el.getElementsByClassName('vxe-table--body')[0].clientHeight)
     },
     filterChangeEvent({ column }) {},
     //   headerDayCellStyle({ column, columnIndex }){
@@ -247,28 +257,28 @@ export default {
      * 视图改变后初始化表头
      */
     setLoading(b) {
-      this.loading = b;
+      this.loading = b
     },
     timeViewChange() {
-      this.initHeaders(this.dateRange);
-      this.initContent();
+      this.initHeaders(this.dateRange)
+      this.initContent()
     },
     initHeaders(dateRange) {
-      this.dateRange = dateRange;
-      let contentWidth = 0;
-      let minDate = moment(this.dateRange[0]);
-      let maxDate = moment(this.dateRange[1]);
-      let splitCount = 1;
-      let diffDays = maxDate.diff(minDate, "day");
-      this.monthCols = [];
-      this.dayCols = [];
-      this.hourCols = [];
-      this.lines = [];
-      let bodyCols = [];
-      this.fixedColWidth = 0;
+      this.dateRange = dateRange
+      let contentWidth = 0
+      let minDate = moment(this.dateRange[0])
+      let maxDate = moment(this.dateRange[1])
+      let splitCount = 1
+      let diffDays = maxDate.diff(minDate, 'day')
+      this.monthCols = []
+      this.dayCols = []
+      this.hourCols = []
+      this.lines = []
+      let bodyCols = []
+      this.fixedColWidth = 0
       for (let i = 0; i < this.leftCols.length; i++) {
-        if (this.leftCols[i].fixed == "left") {
-          this.fixedColWidth = this.fixedColWidth + this.leftCols[i].width;
+        if (this.leftCols[i].fixed == 'left') {
+          this.fixedColWidth = this.fixedColWidth + this.leftCols[i].width
         }
         let obj = {
           field: this.leftCols[i].field,
@@ -277,15 +287,15 @@ export default {
           width: this.leftCols[i].width
           // filters:[{data:null}],
           // filterRender:{name: 'input'}
-        };
-        if (this.leftCols[i].treeNode === true) {
-          obj["treeNode"] = true;
+        }
+        if(this.leftCols[i].treeNode===true){
+          obj['treeNode'] = true
         }
 
         if (this.leftCols[i].slots) {
-          obj.slots = this.leftCols[i].slots;
+          obj.slots = this.leftCols[i].slots
         }
-        this.monthCols.push();
+        this.monthCols.push()
 
         // tmp.filters=undefined
         // tmp.filterRender=undefined
@@ -296,155 +306,155 @@ export default {
         // this.dayCols.push(tmp)
         // obj.filters=[{data:null}]
         // obj.filterRender={name:'input'}
-        bodyCols.push(obj);
-        if (this.timeViewValue !== "day") {
-          this.splitHour = parseInt(this.timeViewValue);
-          this.hourCols.push(obj);
-          this.colWidth = 60;
-          splitCount = 24 / this.splitHour;
+        bodyCols.push(obj)
+        if (this.timeViewValue !== 'day') {
+          this.splitHour = parseInt(this.timeViewValue)
+          this.hourCols.push(obj)
+          this.colWidth = 60
+          splitCount = 24 / this.splitHour
         } else {
-          this.splitHour = 24;
-          this.colWidth = 130;
-          splitCount = 1;
+          this.splitHour = 24
+          this.colWidth = 130
+          splitCount = 1
         }
       }
 
       let tmp = {
-        type: "seq",
-        fixed: "left",
-        title: "",
+        type: 'seq',
+        fixed: 'left',
+        title: '',
 
         width: this.fixedColWidth
-      };
+      }
       if (this.showSeachHeader) {
         tmp.slots = {
-          header: "customSearchHeader"
-        };
+          header: 'customSearchHeader'
+        }
       }
-      this.dayCols.push(tmp);
+      this.dayCols.push(tmp)
 
-      let tempYearMonthCol = null;
+      let tempYearMonthCol = null
       for (let i = 0; i <= diffDays; i++) {
         if (tempYearMonthCol === null) {
           tempYearMonthCol = {
-            title: minDate.format("YYYY-MM"),
-            field: minDate.format("YYYY-MM"),
+            title: minDate.format('YYYY-MM'),
+            field: minDate.format('YYYY-MM'),
             width: this.colWidth * splitCount
-          };
-          this.monthCols.push(tempYearMonthCol);
+          }
+          this.monthCols.push(tempYearMonthCol)
         } else {
           tempYearMonthCol.width =
-            tempYearMonthCol.width + this.colWidth * splitCount;
+              tempYearMonthCol.width + this.colWidth * splitCount
         }
 
         //添加天数
         let tempDayCol = {
-          title: minDate.format("YYYY年MM月DD日"),
-          field: minDate.format("YYYY-MM-DD"),
+          title: minDate.format('YYYY年MM月DD日'),
+          field: minDate.format('YYYY-MM-DD'),
           width: this.colWidth * splitCount,
-          align: "center",
+          align: 'center',
           slots: {
-            header: "dateWeekHeader"
+            header: 'dateWeekHeader'
           },
           params: {
-            date: minDate.format("YYYY年MM月DD日"),
-            week: this.weekDay[minDate.format("E") - 1]
+            date: minDate.format('YYYY年MM月DD日'),
+            week: this.weekDay[minDate.format('E') - 1]
           }
-        };
-        this.dayCols.push(tempDayCol);
+        }
+        this.dayCols.push(tempDayCol)
         //添加小时
-        if (this.timeViewValue !== "day") {
+        if (this.timeViewValue !== 'day') {
           for (let j = 0; j < splitCount; j++) {
-            let tempHour = j * this.splitHour;
-            tempHour = "000" + tempHour;
-            tempHour = tempHour.substr(tempHour.length - 2, 2);
-            contentWidth = contentWidth + this.colWidth;
+            let tempHour = j * this.splitHour
+            tempHour = '000' + tempHour
+            tempHour = tempHour.substr(tempHour.length - 2, 2)
+            contentWidth = contentWidth + this.colWidth
             this.hourCols.push({
-              field: minDate.format("YYYY-MM-DD") + " " + tempHour + ":00:00",
+              field: minDate.format('YYYY-MM-DD') + ' ' + tempHour + ':00:00',
               title: tempHour,
               width: this.colWidth
-            });
+            })
           }
         } else {
-          contentWidth = contentWidth + tempDayCol.width;
+          contentWidth = contentWidth + tempDayCol.width
         }
-        minDate.add(1, "day");
-        if (minDate.format("YYYY-MM") !== tempYearMonthCol.field) {
-          tempYearMonthCol = null;
+        minDate.add(1, 'day')
+        if (minDate.format('YYYY-MM') !== tempYearMonthCol.field) {
+          tempYearMonthCol = null
         }
       }
-      let colLength = this.dayCols.length;
+      let colLength = this.dayCols.length
       //   this.$refs.headMonth.reloadColumn(this.monthCols)
-      this.$refs.headDay.reloadColumn(this.dayCols);
-      if (this.timeViewValue !== "day") {
-        this.headerHeight = 160;
-        colLength = this.hourCols.length;
-        this.$refs.headHour.reloadColumn(this.hourCols);
+      this.$refs.headDay.reloadColumn(this.dayCols)
+      if (this.timeViewValue !== 'day') {
+        this.headerHeight = 160
+        colLength = this.hourCols.length
+        this.$refs.headHour.reloadColumn(this.hourCols)
       } else {
-        this.headerHeight = 120;
+        this.headerHeight = 120
       }
       for (let i = 0; i < colLength; i++) {
-        this.lines.push(i * this.colWidth);
+        this.lines.push(i * this.colWidth)
       }
       bodyCols.push({
-        field: "content",
-        title: "内容",
+        field: 'content',
+        title: '内容',
         width: contentWidth,
-        className: "custom-cell",
+        className: 'custom-cell',
         slots: {
-          default: "content"
+          default: 'content'
         }
-      });
-      this.$refs.bodyGrid.reloadColumn(bodyCols);
+      })
+      this.$refs.bodyGrid.reloadColumn(bodyCols)
       //   this.$refs.lineArea.style.marginLeft =
       //       ((this.fixedColWidth-this.colWidth)) + 'px'
     },
     loadData(rows) {
-      this.rows = rows;
-      this.initContent();
+      this.rows = rows
+      this.initContent()
     },
     initContent() {
-      let splitMinutes = XEUtils.multiply(this.splitHour, 60);
-      let minDateTime = this.dateRange[0];
+      let splitMinutes = XEUtils.multiply(this.splitHour, 60)
+      let minDateTime = this.dateRange[0]
       for (let i = 0; i < this.rows.length; i++) {
-        this.rows[i]["content"] = "";
+        this.rows[i]['content'] = ''
         for (let j = 0; j < this.rows[i].items.length; j++) {
           let diffMiniutes = moment(this.rows[i].items[j].start).diff(
-            moment(minDateTime),
-            "minutes"
-          );
+              moment(minDateTime),
+              'minutes'
+          )
           let tempLeft = XEUtils.divide(
-            XEUtils.multiply(this.colWidth, diffMiniutes),
-            splitMinutes
-          );
+              XEUtils.multiply(this.colWidth, diffMiniutes),
+              splitMinutes
+          )
           //计算左边距
-          this.rows[i].items[j]["left"] = tempLeft;
+          this.rows[i].items[j]['left'] = tempLeft
           //计算宽度
           let ordMinutes = moment(this.rows[i].items[j].end).diff(
-            moment(this.rows[i].items[j].start),
-            "minutes"
-          );
+              moment(this.rows[i].items[j].start),
+              'minutes'
+          )
           let tempWidth = XEUtils.divide(
-            XEUtils.multiply(this.colWidth, ordMinutes),
-            splitMinutes
-          );
-          this.rows[i].items[j]["width"] = tempWidth;
+              XEUtils.multiply(this.colWidth, ordMinutes),
+              splitMinutes
+          )
+          this.rows[i].items[j]['width'] = tempWidth
         }
       }
-      this.lineHeight = this.rows.length * 40;
-      this.$refs.bodyGrid.reloadData(this.rows);
+      this.lineHeight = this.rows.length * 40
+      this.$refs.bodyGrid.reloadData(this.rows)
     },
     ganttBarMouseEnter(evt, ordInfo, rowIndex) {
-      this.ganttBarTooltip.left = evt.clientX; //ordInfo.left + this.eqpWidth
+      this.ganttBarTooltip.left = evt.clientX //ordInfo.left + this.eqpWidth
       this.ganttBarTooltip.top =
-        evt.clientY + evt.target.offsetHeight - evt.offsetY; // (rowIndex + 1) * this.rowHeight
-      this.ganttBarTooltip.item = ordInfo;
-      this.ganttBarTooltip.show = true;
-      this.$emit("mouseEnter", ordInfo);
+          evt.clientY + evt.target.offsetHeight - evt.offsetY // (rowIndex + 1) * this.rowHeight
+      this.ganttBarTooltip.item = ordInfo
+      this.ganttBarTooltip.show = true
+      this.$emit('mouseEnter',ordInfo)
     },
     ganttBarMouseLeave(evt, ordInfo) {
-      this.ganttBarTooltip.show = false;
-      this.$emit("mouseLeave", ordInfo);
+      this.ganttBarTooltip.show = false
+      this.$emit('mouseLeave',ordInfo)
     },
     bodyScroll(scrollInfo) {
       if (scrollInfo.isX === true) {
@@ -452,27 +462,27 @@ export default {
         //   (scrollInfo.scrollLeft-(this.fixedColWidth-this.colWidth)) * -1 + 'px'
 
         // this.$refs.headMonth.scrollTo(scrollInfo.scrollLeft)
-        this.$refs.headDay.scrollTo(scrollInfo.scrollLeft);
-        this.$refs.headHour.scrollTo(scrollInfo.scrollLeft);
+        this.$refs.headDay.scrollTo(scrollInfo.scrollLeft)
+        this.$refs.headHour.scrollTo(scrollInfo.scrollLeft)
       }
     },
     setCurrentRow(row) {
-      this.$refs.bodyGrid.setCurrentRow(row);
+      this.$refs.bodyGrid.setCurrentRow(row)
     },
     getTableData() {
-      return this.$refs.bodyGrid.getTableData().fullData;
+      return this.$refs.bodyGrid.getTableData().fullData
     },
     cellClick(scope) {
-      this.$emit("cellClick", scope);
+      this.$emit('cellClick', scope)
     },
     onSearch() {
-      this.$emit("search", this.searchValue);
+      this.$emit('search', this.searchValue)
     },
     scrollRow(row) {
-      this.$refs.bodyGrid.scrollToRow(row);
+      this.$refs.bodyGrid.scrollToRow(row)
     }
   }
-};
+}
 </script>
 
 <style lang="scss">
@@ -484,10 +494,10 @@ export default {
   padding-right: 0px !important;
 }
 .head-grid
-  .vxe-table
-  .vxe-table--render-wrapper
-  .vxe-table--main-wrapper
-  .vxe-table--body-wrapper {
+.vxe-table
+.vxe-table--render-wrapper
+.vxe-table--main-wrapper
+.vxe-table--body-wrapper {
   height: 0px !important;
 }
 .head-grid .vxe-table .vxe-table--empty-content {