值班ag表格

frontend_web/src/views/duty/components/dutyadd.vue

@@ -63,94 +63,17 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-button type="primary"
-                 icon="el-icon-plus"
-                 size="mini"
-                 @click="handleAddDetails">添加一行</el-button>
-      <el-button type="success"
-                 icon="el-icon-delete"
-                 size="mini"
-                 @click="handleDeleteDetails">删除一行</el-button>
-      <el-table ref="multipleTable"
-                :data="tableData"
-                border
-                fit
-                @cell-click="handle"
-                tooltip-effect="dark"
-                style="width: 100%"
-                :row-class-name="rowClassName"
-                @selection-change="handleDetailSelectionChange"
-                height="100%">
-        <el-table-column type="selection"
-                         width="30"
-                         align="center" />
-        <el-table-column label="地点"
-                         align="center"
-                         prop="dkdd"
-                         width="150">
-          <template slot-scope="scope">
-            <el-select clearable
-                       @change="Local(scope.row)"
-                       v-model="tableData[scope.row.xh-1].dkdd">
-              <el-option v-for="dict in dkddOptions"
-                         :key="dict.dictValue"
-                         :label="dict.dictLabel"
-                         :value="dict.dictValue" />
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column label="时间"
-                         width="250"
-                         prop="sjfw">
-          <template slot-scope="scope">
-            <el-time-picker is-range
-                            format="HH:mm"
-                            value-format="HH:mm"
-                            :style="{width: '100%'}"
-                            start-placeholder="开始时间"
-                            end-placeholder="结束时间"
-                            range-separator="至"
-                            clearable
-                            @change="Time(scope.row)"
-                            v-model="tableData[scope.row.xh-1].sjfw"></el-time-picker>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column prop="Term"
-                         label="周一"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Term"
-                         label="周二"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Term"
-                         label="周三"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Term"
-                         label="周四"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Term"
-                         label="周五"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Term"
-                         label="周六"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Term"
-                         label="周日"
-                         align="center"
-                         min-width="120px"
-                         show-overflow-tooltip></el-table-column>-->
-      </el-table>
+      <template>
+        <ag-grid-vue class="table ag-theme-balham"
+                     style="width: 100%; height: 335px;"
+                     id="grid1"
+                     :gridOptions="gridOptions"
+                     :columnDefs="columnDefs"
+                     :rowData="rowData"
+                     @gridReady="onGridReady">
+        </ag-grid-vue>
+      </template>
+
     </el-form>
 
     <span slot="footer">
@@ -167,11 +90,87 @@
 const cityOptions = ['计算机楼', '主楼', '科技楼'];
 import DutyApi from '@/api/duty'
 import axios from 'axios'
+import { AgGridVue } from 'ag-grid-vue'
 import uploadajax from '@/assets/js/uploadajax.js'
 export default {
   name: 'dutyadd',
+  components: { AgGridVue },
   data () {
     return {
+      // ag-grid相关变量
+      gridOptions: null,
+      gridApi: null,
+      columnApi: null,
+      columnDefs: null,
+      defaultColDef: null,
+      rowData: [{
+        Local: '计算机楼',
+        Time: '8：00-10：00',
+        Monday: '',
+        Tuesday: '',
+        Wednesday: '',
+        Thursday: '',
+        Friday: '',
+        Saturday: '',
+        Sunday: ''
+      },
+      {
+        Local: '',
+        Time: '',
+        Monday: '',
+        Tuesday: '',
+        Wednesday: '',
+        Thursday: '',
+        Friday: '',
+        Saturday: '',
+        Sunday: ''
+      },
+      {
+        Local: '',
+        Time: '',
+        Monday: '',
+        Tuesday: '',
+        Wednesday: '',
+        Thursday: '',
+        Friday: '',
+        Saturday: '',
+        Sunday: ''
+      },
+      {
+        Local: '',
+        Time: '',
+        Monday: '',
+        Tuesday: '',
+        Wednesday: '',
+        Thursday: '',
+        Friday: '',
+        Saturday: '',
+        Sunday: ''
+      },
+      {
+        Local: '',
+        Time: '',
+        Monday: '',
+        Tuesday: '',
+        Wednesday: '',
+        Thursday: '',
+        Friday: '',
+        Saturday: '',
+        Sunday: ''
+      },
+      {
+        Local: '',
+        Time: '',
+        Monday: '',
+        Tuesday: '',
+        Wednesday: '',
+        Thursday: '',
+        Friday: '',
+        Saturday: '',
+        Sunday: ''
+      }],
+      prenum: '',
+      multipleSelection: [],
       //详细list
       tableData: [],
       Local: '',
@@ -230,10 +229,76 @@ export default {
       }
     }
   },
+  beforeMount () {
+    this.gridOptions = {
+      rowHeight: 32, // 设置行高为32px
+      // 缺省列属性
+      defaultColDef: {
+        width: 200,
+        resizable: true,
+        editable: true,//单元表格是否可编辑
+      },
+      // onCellEditingStopped: this.changesq,
+      onCellClicked: this.changeClick,
+      onRowSelected: this.handleSelectionChange, // 行选中
+      onSortChanged: this.handleSortChange // 排序传递后台
+    }
+    this.columnDefs = [
+      {
+        headerName: '地点', field: 'Local'
+      },
+      {
+        headerName: '时间段', field: 'Time'
+      },
+      {
+        headerName: '周一', field: 'Monday'
+      },
+      {
+        headerName: '周二', field: 'Tuesday'
+      },
+      {
+        headerName: '周三', field: 'Wednesday'
+      },
+      {
+        headerName: '周四', field: 'Thursday'
+      },
+      {
+        headerName: '周五', field: 'Friday'
+      },
+      {
+        headerName: '周六', field: 'Saturday'
+      },
+      {
+        headerName: '周日', field: 'Sunday'
+      }
+    ]
+
+  },
   created () {
     this.init()
   },
+  mounted () {
+    this.gridOptions.context = { page: this }
+    this.gridApi = this.gridOptions.api
+    this.gridColumnApi = this.gridOptions.columnApi
+    this.doRefresh()
+  },
   methods: {
+    // 表格就绪后后执行
+    onGridReady (params) {
+      // 调整表格列宽大小自适应
+      this.gridApi.sizeColumnsToFit()
+    },
+    handleSortChange (val) {
+      var sortState = this.gridApi.getSortModel()
+      // 获取排序的字段
+      if (sortState && sortState.length > 0) {
+        var item = sortState[0]
+        this.sort.prop = item.colId
+        this.sort.order = item.sort
+      }
+      this.doRefresh()
+    },
     //单选框选中数据
     handleDetailSelectionChange (selection) {
       if (selection.length > 1) {
@@ -243,31 +308,132 @@ export default {
         this.checkedDetail = selection;
       }
     },
-    // 添加行数
-    rowClassName ({ row, rowIndex }) {
-      row.xh = rowIndex + 1;
+    // 表格就绪后后执行
+    onGridReady (params) {
+      this.gridApi = params.api
+      this.columnApi = params.columnApi
+      // 调整表格列宽大小自适应
+      this.gridApi.sizeColumnsToFit()
     },
-    // 添加一行
-    handleAddDetails () {
-      if (this.tableData == undefined) {
-        this.tableData = new Array();
+    // 选择
+    changeClick (event) {
+      // 判断是否选取的是ABCDEFGH列
+      // if (event.colDef.field === 'k') {
+      var _this = this
+      var rowNode = this.gridOptions.api.getRowNode(event.rowIndex)
+      var rows = JSON.parse(JSON.stringify(rowNode.data))
+      var headerArr = ['Local', 'Time', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+      headerArr.forEach(function (key, num) {
+        if (rows[key]) {
+          var evRow = event.rowIndex + 1
+          var evNum = num + 1
+          var ev = evRow.toString() + evNum.toString()
+          var rowsNodeArray = rows[key].split(',')
+          // 如果是黄色则变为绿色
+          // 黄色
+          if (rowsNodeArray.length < 4) {
+            if (rowsNodeArray[1] === '0') {
+              // 变为绿色
+              rowNode.data[key] = rowsNodeArray[0] + ',1,' + rowsNodeArray[2]
+              // 加入数组
+              _this.tableNum[ev] = event.rowIndex
+              _this.tableField[ev] = key
+            } else if (rowsNodeArray[1] === '1') {
+              // 绿色则改成黄色，并从数组清空数值
+              rowNode.data[key] = rowsNodeArray[0] + ',0,' + rowsNodeArray[2]
+              _this.tableNum[ev] = ''
+              _this.tableField[ev] = ''
+            }
+          }
+        }
+      })
+      // 刷新表格
+      // this.refreshAll()
+      // }
+
+      // 获取单元格颜色
+      var span = 0
+      var nowColor = event.event.toElement.style.backgroundColor
+      if (!nowColor) {
+        span = 1
+        // 点击到了<span>文本上
+        nowColor = event.event.toElement.parentElement.style.backgroundColor
       }
-      console.log(tableData, 111)
-      let obj = {};
-      obj.Local = "教学楼";
-      obj.Time = ["07:00", "07:30"];
-      obj.Time = ["06:00", "12:00"];
 
-      this.tableData.push(obj);
+      // 判断是否有数据
+      if (nowColor !== 'rgb(0, 255, 0)' && nowColor !== 'yellow') {
+        //   return false
+      }
+      var evArray = event.value.split(',')
+      if (evArray[1] != 0 && evArray[1] != 1 && evArray.length > 3) {
+        return false
+      }
+      if (evArray.length < 4) {
+        // 根据颜色存入数组，列值，单元格值
+        var evNum = event.rowIndex + 1
+        var ev = evNum + event.colDef.headerName
+        var eventArray = event.value.split(',')
+        if (nowColor === 'rgb(0, 255, 0)') {
+          this.nowclick.set(event.rowIndex.toString() + event.colDef.headerName, eventArray[2])
+          // event.event.toElement.parentElement.style.backgroundColor = 'yellow'
+          this.tableNum[ev] = ''
+          this.tableField[ev] = ''
+          if (span === 0) {
+            event.event.toElement.style.backgroundColor = 'yellow'
+          } else {
+            event.event.toElement.parentElement.style.backgroundColor = 'yellow'
+          }
+          // 当点击改变为黄色时候，赋值，0
+          event.data[event.colDef.field] = eventArray[0] + ',0,' + eventArray[2]
+        } else if (nowColor === 'yellow') {
+          this.nowclick.set(event.rowIndex.toString() + event.colDef.headerName, eventArray[2])
+          this.tableNum[ev] = event.rowIndex
+          this.tableField[ev] = event.colDef.field
+          if (span === 0) {
+            event.event.toElement.style.backgroundColor = '#00FF00'
+          } else {
+            event.event.toElement.parentElement.style.backgroundColor = '#FF0000'
+          }
+          event.data[event.colDef.field] = eventArray[0] + ',1,' + eventArray[2]
+        }
+      }
+    },
+    // 获取孔号详情
+    getHoleInfoP () {
+      let _this = this
+      _this.rowData = []
+      // 传入后台获取第一板的内容
+      let params = {
+        boardid: _this.mainBoardForm.Id
+      }
+      BoardApi.getHolePre(params)
+        .then(res => {
+          _this.rowData = res
+          for (let row of _this.rowData) {
+            let headerArr = ['Local', 'Time', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
+            headerArr.forEach(function (key, num) {
+              let rowarr = row[key].split(',')
+              if (row[key] != '' && rowarr.length >= 3) {
+                _this.samids.push(rowarr[2])
+              }
+            })
+          }
+          this.getIsQuick()
+        })
     },
-    // 删除一行
-    handleDeleteDetails () {
-      if (this.checkedDetail.length == 0) {
-        this.$alert("请先选择要删除的数据", "提示", {
-          confirmButtonText: "确定",
-        });
+    // 处理列表选择
+    handleSelectionChange () {
+      let _this = this
+      _this.multipleSelection = _this.gridOptions.api.getSelectedRows()
+      _this.deleteBtnVisible = !_this.multipleSelection || _this.multipleSelection.length === 0
+      if (!_this.deleteBtnVisible) {
+        _this.deleteIds = []
+        // 赋值删除id列表
+        _this.multipleSelection.forEach((item, k) => {
+          _this.deleteIds.push(item.Id)
+        })
       } else {
-        this.dutylist.splice(this.checkedDetail[0].xh - 1, 1);
+        _this.deleteIds = []
       }
     },
     // 列表选择