modernDairy/src/views/asset/template/index.vue

<template>
  <el-row :gutter="6" style="margin-top:5px;margin-left:5px;">
    <el-col :span="6">
      <el-card ref="card" class="box-card">
        <div slot="header" class="clearfix" style="text-align: right; ">
          <el-row :gutter="2" style="margin-top:5px; margin-left:5px;">
            <el-col :span="12" style="text-align: left; vertical-align:middle; font-size: 20px">  <span>设备分类 </span></el-col>
            <el-col :span="6"> <el-col :span="6">  <el-button type="warning" icon="el-icon-edit" size="mini" @click="jump" /></el-col>
            </el-col>
            <!-- <el-col :span="6">  <el-button type="primary" icon="el-icon-refresh" size="mini" /></el-col> -->
          </el-row>
        </div>
        <div class="component-item" :style="{width:275 + 'px',height: curHeight + 'px'}">
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="parentType"
            :props="defaultProps"
            :highlight-current="true"
            @node-click="handleNodeClick"
          />
        </div>
      </el-card>
    </el-col>
    <el-col :span="18">
      <div class="app-container">
        <el-tabs v-model="action" class="app-content-mokuai" :style="{height: curHeight + 'px'}" @tab-click="handleTabClick">
          <el-tab-pane label="部位" name="first"><Buwei :asset-typeid="dictid" /> </el-tab-pane>
          <el-tab-pane label="点检模板" name="second"> <Dianjian :asset-typeid="dictid" :asset-typename="typename" /> </el-tab-pane>
          <el-tab-pane label="保养模板" name="third"> <Baoyang :asset-typeid="dictid" /></el-tab-pane>
          <el-tab-pane label="常见故障" name="fourth"><Guzhang :asset-typeid="dictid" :asset-typename="typename" :asset-action="action" /> </el-tab-pane>
          <el-tab-pane label="描述故障" name="sixth"><Miaoshu :asset-typeid="dictid" :asset-typename="typename" :asset-action="action" /> </el-tab-pane>
          <!--
          <el-tab-pane label="维修部门" name="fifth"><Bumeng :asset-typeid="dictid" :type-number="checkNumber" :dept-id="deptId" /> </el-tab-pane> -->
          <!-- :asset-checknumber="checkNumber" -->
          <!-- <el-tab-pane label="运行记录模板" name="fourth"> <Yunxing :asset-typeid="dictid" /> </el-tab-pane> -->
          <!-- <Buwei :asset-typeid="dictid" /> <Dianjian :asset-typeid="dictid" />  <Baoyang :asset-typeid="dictid" />
          <Guzhang :asset-typeid="dictid" />  <Yunxing :asset-typeid="dictid" /> -->
        </el-tabs>
      </div>
    </el-col>
  </el-row>
</template>

<script>
// import TreeSelect from '@/components/TreeSelect'
import { GetDataByName, transData, GetDataByNames } from '@/api/common'
import Buwei from './components/buwei' // secondary package based on el-pagination
import Dianjian from './components/dianjian' // secondary package based on el-pagination
import Baoyang from './components/baoyang' // secondary package based on el-pagination
import Guzhang from './components/guzhang' // secondary package based on el-
import Miaoshu from './components/miaoshu'
// import Bumeng from './components/bumeng' // secondary package based on el-pagination
// import Yunxing from './components/yunxing' // secondary package based on el-pagination
export default {
  name: 'Template',
  // components: { Buwei, , Baoyang, Guzhang, Bumeng },
  components: { Buwei, Dianjian, Baoyang, Guzhang, Miaoshu },
  data() {
    return {
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      curHeight: document.documentElement.clientHeight || document.body.clientHeight - 200,
      action: 'first',
      list: [],
      dictid: 0,
      deptId: 0,
      typename: '',
      listLoading: true,
      getRecuListParm: {
        name: 'geteqclasslist'
      },
      parentType: [],
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      upkeepTypes: [],
      upkeepgrades: [],
      listActive: [],
      requestParams: [
        { name: 'getDictByName1', offset: 0, pagecount: 0, params: ['保养类型'] },
        { name: 'getDictByName2', offset: 0, pagecount: 0, params: ['保养级别'] },
        { name: 'getDictByName', offset: 0, pagecount: 0, params: ['保养模板执行动作'] }
      ]
    }
  },
  created() {
    this.get_select_list()
  },
  methods: {
    getDownListAll() {
      GetDataByNames(this.requestParams).then(response => {
        this.upkeepTypes = response.data.getDictByName1.list
        this.upkeepgrades = response.data.getDictByName2.list
        this.listActive = response.data.getDictByName.list
      })
    },
    get_select_list() {
      GetDataByName(this.getRecuListParm).then(response => {
        if (response.data.list !== null) {
          this.parentType = transData(response.data.list, 'id', 'pid', 'children')
          console.log(this.parentType)
        }
      })
    },
    handleNodeClick(data, node) {
      console.log(data, node)
      if (node.childNodes.length == 0) {
        this.dictid = data.id
        this.typename = data.typeName
        this.action = 'first'
        this.pid = data.pid
        this.checkNumber = data.typeCode
        this.deptId = data.deptId
      } else {
        this.dictid = ''
        this.$message({
          type: 'error',
          message: '请选择最子集设备',
          duration: 2000
        })
      }
    },
    handleTabClick(tab, event) {
      console.log(tab, event)
      this.action = tab.name
      this.getDownListAll()
    },
    // ----------------------------------------------

    jump() {
      this.$router.push('/basic/assetType')
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-content-mokuai{
    overflow-y: auto;
  }
  .component-item{
    overflow-y: auto
  }
</style>