Tmr-Admin-BeefCattle/.svn/pristine/8e/8e6cd3310f5fce1fbc8f80b9fc1189677b25e12a.svn-base

<template>
  <div class="role-details inside-base">
    <div class="inside-base-main clearfix">
      <div class="inside-base-cont">
        <div class="role-cont clearfix">
          <div>
            <el-table
              ref="table"
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              :indent="10"
              :select-on-indeterminate="true"
              :default-expand-all="false"
              show-checkbox
              :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
            >
              <el-table-column prop="name" label="页面" />
              <el-table-column label="查看">
                <template slot-scope="scope">
                  <!-- <el-checkbox v-if="scope.row.fnList.includes('查看')" v-model="scope.row.fnCheck.see" label="查看" @change="fnCheckEv(scope, 'see')" /> -->
                  <el-checkbox v-model="scope.row.fnCheck.see" label="查看" @change="fnCheckEv(scope, 'see')" />
                </template>
              </el-table-column>
              <el-table-column label="编辑">
                <template slot-scope="scope">
                  <!-- <el-checkbox v-if="scope.row.fnList.includes('编辑')" v-model="scope.row.fnCheck.edit" label="编辑" @change="fnCheckEv(scope, 'edit')" /> -->
                  <el-checkbox v-model="scope.row.fnCheck.edit" label="编辑" @change="fnCheckEv(scope, 'edit')" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormulaStatistics',
  data() {
    return {
      msg: '',
      tableData: [
        {
          id: 1, name: '配方计划',
          // fnList: ['查看', '编辑'],
          fnCheck: { see: false, edit: false },
          childList: [
            {
              p_id: 1, id: 31, name: '配方模板',
              // fnList: ['查看', '编辑'],
              fnCheck: { see: false, edit: false }
            },
            {
              p_id: 1, id: 32, name: '栏舍配方',
              // fnList: ['查看', '编辑'],
              fnCheck: { see: false, edit: false }
            }
          ]
        }, {
          id: 2, name: '栏舍生产',
          // fnList: ['查看', '编辑'],
          fnCheck: { see: false, edit: false },
          childList: [
            {
              p_id: 2, id: 33, name: '栏舍产奶量',
              // fnList: ['查看', '编辑'],
              fnCheck: { see: false, edit: false }
            },
            {
              p_id: 2, id: 34, name: '栏舍剩料量',
              // fnList: ['查看', '编辑'],
              fnCheck: { see: false, edit: false }
            }
          ]
        }
      ]
    }
  },
  mounted() {

  },
  methods: {
    // 查找父级函数
    getParent(data2, nodeId2) {
      var arrRes = []
      if (data2.length === 0) {
        if (nodeId2) {
          arrRes.push(data2)
        }
        return arrRes
      }
      const rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          const node = data[i]
          if (node.id === nodeId) {
            arrRes.push(node)
            rev(data2, node.p_id)
            break
          } else {
            if (node.childList) {
              rev(node.childList, nodeId)
            }
          }
        }
        return arrRes
      }
      arrRes = rev(data2, nodeId2)
      return arrRes
    },

    /**
     * 功能选择
     */
    // 子选框事件
    fnCheckEv(scope, type) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleFnAll(scope.row, scope.row.fnCheck[type], type)
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        if (!item.childList) {
          item.fnCheck[type] = scope.row.fnCheck[type]
        } else {
          var num = 0
          item.childList.forEach((item, i) => {
            if (item.fnCheck[type] === true) {
              num += 1
            }
          })
          if (num === item.childList.length) {
            item.fnCheck[type] = true
          } else {
            item.fnCheck[type] = false
          }
        }
      })
    },
    handleFnAll(row, fnCheck, type) {
      row.fnCheck[type] = fnCheck
      if (row.childList) {
        const that = this
        row.childList.forEach((element, i) => {
          that.handleFnAll(row.childList[i], fnCheck, type)
        })
      }
    },
    /**
     * 权限选择
     */
    // 权限：全部、自己
    // 子选框事件
    dataCheckEv(scope, type) {
      const temp = scope.row.dataCheck[type]
      for (const x in scope.row.dataCheck) {
        scope.row.dataCheck[x] = false
      }
      scope.row.dataCheck[type] = temp
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleDataAll(scope.row, scope.row.dataCheck[type], type)
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        for (const x in item.dataCheck) {
          item.dataCheck[x] = false
        }
        if (!item.childList) {
          item.dataCheck[type] = temp
        } else {
          var num = 0
          item.childList.forEach((item, i) => {
            if (item.dataCheck[type] === true) {
              num += 1
            }
          })
          if (num === item.childList.length) {
            item.dataCheck[type] = true
          } else {
            item.dataCheck[type] = false
          }
        }
      })
    },
    handleDataAll(row, dataCheck, type) {
      for (const x in row.dataCheck) {
        row.dataCheck[x] = false
      }
      row.dataCheck[type] = dataCheck
      if (row.childList) {
        const that = this
        row.childList.forEach((element, i) => {
          that.handleDataAll(row.childList[i], dataCheck, type)
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.inside-base {
  position: relative;
}

.inside-base-main {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(231,232,238,1);
  border-radius: 4px;
  margin-bottom: 30px;
}

// 中间内容
.inside-base-cont {
  margin: 0 20px;
}

.role-cont {
  position: relative;
  font-size: 16px;
  color: #333333;
  line-height: 40px;
  > span {
    width: 90px;
    height: 40px;
    text-align: right;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  > div {
    position: relative;
    width: 90%;
    float: left;
    margin-bottom: 20px;
    >>> .el-input__inner {
      width: 320px;
    }
  }
}
.check-page-all {
  position: absolute;
  top: 13px;
  left: 11px;
  z-index: 99;
}

/* element-ui css */
.inside-base {
  >>> .el-input__inner {
    font-size: 16px;
    color: #333333;
  }
}
</style>