doway-coms 1.1.76 → 1.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doway-coms",
-  "version": "1.1.76",
+  "version": "1.1.78",
   "description": "doway组件库",
   "author": "dowaysoft",
   "main": "packages/index.js",
@@ -12,18 +12,18 @@
     "lib": "vue-cli-service build --target lib --name doway-coms --dest lib packages/index.js",
     "build:test": "vue-cli-service build --report"
   },
-  
   "dependencies": {
     "ant-design-vue": "1.7.8",
+    "axios": "0.18.0",
+    "js-cookie": "2.2.0",
+    "vee-validate": "3.4.14",
     "vue": "2.7.14",
-    "vuex": "3.6.2",
     "vue-router": "3.6.5",
-    "vee-validate": "3.4.14",
+    "vuedraggable": "^2.24.3",
+    "vuex": "3.6.2",
     "vxe-table": "3.5.4",
-    "xe-utils": "3.5.4",
-    "axios": "0.18.0",
-    "js-cookie": "2.2.0",
-    "xe-clipboard":"1.10.2"
+    "xe-clipboard": "1.10.2",
+    "xe-utils": "3.5.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.2.0",
@@ -41,7 +41,7 @@
     "sass-loader": "10.4.1",
     "vue-template-compiler": "^2.6.11"
   },
-  "bundleDependencies":false,
+  "bundleDependencies": false,
   "repository": {
     "type": "git",
     "url": "https://www.npmjs.com/package/doway-coms.git"

package/packages/BaseGantt/index.js

@@ -0,0 +1,10 @@
+// 导入组件，组件必须声明 name
+import BaseGantt from './src/index.vue';
+import VXETable from 'vxe-table'
+// 为组件提供 install 安装方法，供按需引入
+BaseGantt.install = function(Vue) {
+    Vue.use(VXETable)
+    Vue.component(BaseGantt.name, BaseGantt);
+};
+// 默认导出组件
+export default BaseGantt;

package/packages/BaseGantt/src/index.vue

@@ -0,0 +1,580 @@
+<template>
+  <div>
+    <div style="display: flex">
+      <div style="flex: 1">
+        <slot name="toolLeftContent"></slot>
+      </div>
+      <div>
+        <a-space>
+          <a-radio-group
+              :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-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"
+    >
+      <template #customSearchHeader>
+        <vxe-input
+            v-model="searchValue"
+            placeholder="搜索"
+            type="search"
+            @input="onSearch"
+        ></vxe-input>
+      </template>
+      <template #dateWeekHeader="{ column }">
+        <div>
+          <div>{{ column.params.date }}</div>
+          <div>{{ column.params.week }}</div>
+        </div>
+      </template>
+    </vxe-grid>
+    <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
+        class="gantt-line"
+        v-for="loopLine in lines"
+        :key="loopLine"
+        :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
+      ></div>
+    </div> -->
+    <div
+        class="gantt-bar-tooltip"
+        v-if="ganttBarTooltip.show === true"
+        :style="{
+        left: ganttBarTooltip.left + 'px',
+        top: ganttBarTooltip.top + 'px'
+      }"
+    >
+      <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="{
+        isCurrent: isCurrent,
+        isHover: true
+      }"
+        :cell-class-name="cellClassName"
+        :row-class-name="rowClassName"
+        @cell-click="cellClick"
+        @scroll="bodyScroll"
+        :loading="loading"
+        @filter-change="filterChangeEvent"
+    >
+      <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' }"
+            ></div>
+          </div>
+          <div
+              v-for="loopItem in row.items"
+              :key="loopItem.id"
+              class="gantt-bar"
+              @mouseenter="ganttBarMouseEnter($event, loopItem, rowIndex)"
+              @mouseleave="ganttBarMouseLeave($event, loopItem)"
+              :style="{
+              marginLeft: loopItem.left + 'px',
+              width: loopItem.width + 'px'
+            }"
+          >
+            <slot :item="loopItem" name="itemContent"></slot>
+          </div>
+        </div>
+      </template>
+      <template #customCell="{ row, column }">
+        <slot name="customCell" :item="{ row, column }"></slot>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<script>
+import { Space, Radio } from "ant-design-vue";
+import XEUtils from 'xe-utils'
+import moment from 'moment'
+import draggable from 'vuedraggable'
+export default {
+  name: "BaseGantt",
+  components: {
+    draggable,
+    'a-space': Space,
+    'a-radio-button': Radio.Button,
+    'a-radio-group': Radio.Group,
+  },
+  data() {
+    return {
+      searchValue: '',
+      timeViewValue: 'day',
+      loading: false,
+      rowColData: {},
+      minDate: null,
+      maxDate: null,
+      monthCols: [],
+      fixedColWidth: 0,
+      colWidth: 55,
+      splitHour: 4,
+      dayCols: [],
+      hourCols: [],
+      headerHeight: 0,
+      eqpWidth: 100,
+      rowHeight: 40,
+      lines: [],
+      lineHeight: 0,
+      dateRange: [],
+      ganttBarTooltip: {
+        show: false,
+        left: 0,
+        top: 0,
+        item: {},
+        color: ''
+      },
+      rows: [],
+      weekDay: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    }
+  },
+  props: {
+    showSeachHeader: {
+      type: Boolean,
+      default: false
+    },
+    isCurrent: {
+      type: Boolean,
+      default: false
+    },
+    timeValue: {
+      type: String,
+      default: 'day'
+    },
+    height: {
+      default: 'auto'
+    },
+    leftCols: {
+      type: Array,
+      default: function() {
+        return [{ field: 'eqp', width: 100, fixed: 'left' }]
+      }
+    },
+    cellClassName: {
+      type: Function,
+      default: function() {}
+    },
+    rowClassName: {
+      type: Function,
+      default: function() {}
+    }
+  },
+  computed: {
+    computedHeight: function() {
+      return this.height - this.headerHeight
+    }
+  },
+  mounted() {
+    this.timeViewValue = this.timeValue
+  },
+  created() {},
+  methods: {
+    filterChangeEvent({ column }) {},
+    //   headerDayCellStyle({ column, columnIndex }){
+    //       return {
+    //           paddingLeft:'4px',
+    //           paddingRight:'4px'
+    //       }
+    //   },
+    /**
+     * 视图改变后初始化表头
+     */
+    setLoading(b) {
+      this.loading = b
+    },
+    timeViewChange() {
+      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
+      for (let i = 0; i < this.leftCols.length; i++) {
+        if (this.leftCols[i].fixed == 'left') {
+          this.fixedColWidth = this.fixedColWidth + this.leftCols[i].width
+        }
+        let obj = {
+          field: this.leftCols[i].field,
+          title: this.leftCols[i].title,
+          fixed: this.leftCols[i].fixed,
+          width: this.leftCols[i].width
+          // filters:[{data:null}],
+          // filterRender:{name: 'input'}
+        }
+
+        if (this.leftCols[i].slots) {
+          obj.slots = this.leftCols[i].slots
+        }
+        this.monthCols.push()
+
+        // tmp.filters=undefined
+        // tmp.filterRender=undefined
+        //去掉天这一行的标题
+        // else{
+        //   tmp.width+=width/
+        // }
+        // 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
+        } else {
+          this.splitHour = 24
+          this.colWidth = 130
+          splitCount = 1
+        }
+      }
+
+      let tmp = {
+        type: 'seq',
+        fixed: 'left',
+        title: '',
+
+        width: this.fixedColWidth
+      }
+      if (this.showSeachHeader) {
+        tmp.slots = {
+          header: 'customSearchHeader'
+        }
+      }
+      this.dayCols.push(tmp)
+
+      let tempYearMonthCol = null
+      for (let i = 0; i <= diffDays; i++) {
+        if (tempYearMonthCol === null) {
+          tempYearMonthCol = {
+            title: minDate.format('YYYY-MM'),
+            field: minDate.format('YYYY-MM'),
+            width: this.colWidth * splitCount
+          }
+          this.monthCols.push(tempYearMonthCol)
+        } else {
+          tempYearMonthCol.width =
+              tempYearMonthCol.width + this.colWidth * splitCount
+        }
+
+        //添加天数
+        let tempDayCol = {
+          title: minDate.format('YYYY年MM月DD日'),
+          field: minDate.format('YYYY-MM-DD'),
+          width: this.colWidth * splitCount,
+          align: 'center',
+          slots: {
+            header: 'dateWeekHeader'
+          },
+          params: {
+            date: minDate.format('YYYY年MM月DD日'),
+            week: this.weekDay[minDate.format('E') - 1]
+          }
+        }
+        this.dayCols.push(tempDayCol)
+        //添加小时
+        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
+            this.hourCols.push({
+              field: minDate.format('YYYY-MM-DD') + ' ' + tempHour + ':00:00',
+              title: tempHour,
+              width: this.colWidth
+            })
+          }
+        } else {
+          contentWidth = contentWidth + tempDayCol.width
+        }
+        minDate.add(1, 'day')
+        if (minDate.format('YYYY-MM') !== tempYearMonthCol.field) {
+          tempYearMonthCol = null
+        }
+      }
+      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)
+      } else {
+        this.headerHeight = 120
+      }
+      for (let i = 0; i < colLength; i++) {
+        this.lines.push(i * this.colWidth)
+      }
+      bodyCols.push({
+        field: 'content',
+        title: '内容',
+        width: contentWidth,
+        className: 'custom-cell',
+        slots: {
+          default: 'content'
+        }
+      })
+      this.$refs.bodyGrid.reloadColumn(bodyCols)
+      //   this.$refs.lineArea.style.marginLeft =
+      //       ((this.fixedColWidth-this.colWidth)) + 'px'
+    },
+    loadData(rows) {
+      this.rows = rows
+      this.initContent()
+    },
+    initContent() {
+      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'] = ''
+        for (let j = 0; j < this.rows[i].items.length; j++) {
+          let diffMiniutes = moment(this.rows[i].items[j].start).diff(
+              moment(minDateTime),
+              'minutes'
+          )
+          let tempLeft = XEUtils.divide(
+              XEUtils.multiply(this.colWidth, diffMiniutes),
+              splitMinutes
+          )
+          //计算左边距
+          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'
+          )
+          let tempWidth = XEUtils.divide(
+              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)
+    },
+    ganttBarMouseEnter(evt, ordInfo, rowIndex) {
+      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
+    },
+    ganttBarMouseLeave(evt, ordInfo) {
+      this.ganttBarTooltip.show = false
+    },
+    bodyScroll(scrollInfo) {
+      if (scrollInfo.isX === true) {
+        // this.$refs.lineArea.style.marginLeft =
+        //   (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)
+      }
+    },
+    setCurrentRow(row) {
+      this.$refs.bodyGrid.setCurrentRow(row)
+    },
+    getTableData() {
+      return this.$refs.bodyGrid.getTableData().fullData
+    },
+    cellClick(scope) {
+      this.$emit('cellClick', scope)
+    },
+    onSearch() {
+      this.$emit('search', this.searchValue)
+    },
+    scrollRow(row) {
+      this.$refs.bodyGrid.scrollToRow(row)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.custom-cell > div {
+  // background:blue;
+  // background-color: blue !important;
+  // overflow: unset !important;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.head-grid
+.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 {
+  display: none;
+}
+.header-cell-day .vxe-cell {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+.mytable-scrollbar .vxe-body--column.col-blue {
+  background-color: #e6f7ff;
+  color: #ffffff;
+  cursor: pointer;
+  /* font-weight: bold; */
+}
+</style>
+<style lang="scss" scoped>
+.gantt-bar {
+  position: absolute;
+  top: 8px;
+  z-index: 2;
+  // float:left;
+  height: 30px;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.gantt-bar :hover {
+  background-color: darkgrey;
+}
+
+.gantt-line-area {
+  position: absolute;
+  z-index: 1;
+  margin-left: -1px;
+  margin-top: -20px;
+}
+.gantt-line {
+  position: absolute;
+  width: 1px;
+  background-color: #e8eaec;
+}
+.gantt-bar-tooltip {
+  position: fixed;
+  z-index: 10;
+  border: 1px solid #0b0b0b;
+  padding: 3px;
+  border-radius: 3px;
+  //   background: red;
+}
+/*滚动条整体部分*/
+.mytable-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  z-index: 10;
+}
+/*滚动条的轨道*/
+.mytable-scrollbar ::-webkit-scrollbar-track {
+  background-color: #ffffff;
+  z-index: 10;
+}
+/*滚动条里面的小方块，能向上向下移动*/
+.mytable-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: #bfbfbf;
+  border-radius: 5px;
+  border: 1px solid #f1f1f1;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
+  z-index: 10;
+}
+.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: #787878;
+  z-index: 10;
+}
+/*边角，即两个滚动条的交汇处*/
+.mytable-scrollbar ::-webkit-scrollbar-corner {
+  background-color: #ffffff;
+  z-index: 10;
+}
+</style>
+<style>
+.mytable-scrollbar .vxe-body--column.col-red {
+  background-color: rgb(227, 9, 53);
+  color: rgb(55, 55, 55);
+  /* font-weight: bold; */
+}
+.mytable-scrollbar .vxe-body--column.col-orange {
+  background-color: rgb(237, 216, 20);
+  color: rgb(55, 55, 55);
+  /* font-weight: bold; */
+}
+/*.mytable-scrollbar .vxe-body--column.col-grey {*/
+/*  background-color: rgb(140, 140, 138);*/
+/*  color: rgb(55, 55, 55);*/
+/*  !* font-weight: bold; *!*/
+/*}*/
+/*.mytable-scrollbar .vxe-body--column.col-blue {*/
+/*  background-color: #1890ff;*/
+/*  color: rgb(55, 55, 55);*/
+/*  !* font-weight: bold; *!*/
+/*}*/
+.row-blue {
+  background-color: lightskyblue;
+}
+</style>

package/packages/BaseGrid/src/index.vue

@@ -353,10 +353,10 @@
         show-footer
         destroy-on-close
       >
-        <base-adjust-grid-view
+        <BaseGridAdjust
           :userDefineColumns="userDefineColumns"
           ref="baseAdjustGridView"
-        ></base-adjust-grid-view>
+        ></BaseGridAdjust>
         <template #footer>
           <a-button
             type="primary"
@@ -387,6 +387,7 @@
   import { Empty,Row,Col,Space,Input,Select,DatePicker,Checkbox,InputNumber,TimePicker,Button } from 'ant-design-vue'
   import BasePagination from '../../BasePagination/index'
   import BasePulldown from '../../BasePulldown/index'
+  import BaseGridAdjust from '../../BaseGridAdjust/index'
   import { saveUserModuleDataFieldApi } from '../../utils/api'
   import {gridDefaultValueDisplay } from '../../utils/filters'
   export default {
@@ -405,7 +406,8 @@
         'a-time-picker':TimePicker,
         'a-button':Button,
         BasePagination,
-        BasePulldown
+        BasePulldown,
+        BaseGridAdjust
     },
     data() {
       return {

package/packages/index.js

@@ -17,6 +17,7 @@ import BaseIntervalInput from './BaseIntervalInput/index';
 import BaseForm from './BaseForm/index';
 import BasePictureCard from './BasePictureCard/index';
 import BasePrintPreview from './BasePrintPreview/index';
+import BaseGantt from "./BaseGantt/index";
 
 import store from './utils/store'
 import request from './utils/request'
@@ -25,7 +26,7 @@ import BaseGrid from './BaseGrid/index';
 // 存储组件列表
 const components = [BaseInput,BaseCheckbox,BaseDate,BaseDatetime,BaseDateWeek,BaseTextArea,BaseSelect,BaseSelectMulti
 	,BaseTime,BasePagination,
-	BaseNumberInput,BaseTool,BaseToolStatus,BasePulldown,BaseIntervalInput,BaseForm,BasePictureCard,BaseGrid,BasePrintPreview];
+	BaseNumberInput,BaseTool,BaseToolStatus,BasePulldown,BaseIntervalInput,BaseForm,BasePictureCard,BaseGrid,BasePrintPreview, BaseGantt];
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 
 import 'vxe-table/lib/style.css'
@@ -146,6 +147,7 @@ export {
 	BaseGrid,
 	BasePictureCard,
 	BasePrintPreview,
+	BaseGantt,
 	store,
 	request,
 }