mt-ck-wms-ui/src/views/basicData/Equipment/components/equipmentDetectParam-add.vue

<!--
 * @Author: zwq
 * @Date: 2020-12-29 16:37:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-26 14:02:11
 * @enName:
-->
<template>
  <el-container style="margin:30px">
    <el-aside style="width:250px">
      <el-tree :data="menuList" :props="defaultProps" @node-click="getOrganization" />
    </el-aside>
    <el-main style="border:2px solid #E4E4E4;border-radius:10px;margin-left:10px">
      <el-form
        ref="dataForm"
        :model="listQuery"
        :inline="true"
        size="medium"
        label-position="left"
      >
        <el-form-item :label="$t('module.basicData.equipment.EquipmentName')+'：'">
          <span style="color:#1890FF">{{ listQuery.detectEquipmentAreaName }}</span>
        </el-form-item>
        <el-form-item :label="keyName +'：'" prop="name">
          <el-input v-model="listQuery.name" :placeholder="placeholderName" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">{{ 'btn.search' | i18nFilter }}</el-button>
          <el-button v-if="listQuery.detectEquipmentAreaId" type="primary" @click="addNew()">{{ 'btn.add' | i18nFilter }}</el-button>
        </el-form-item>
      </el-form>
      <base-table
        :page="listQuery.current"
        :limit="listQuery.size"
        :table-config="tableProps"
        :table-data="list"
      >
        <method-btn
          slot="handleBtn"
          :method-list="tableBtn"
          @clickBtn="handleClick"
        />
      </base-table>
    </el-main>
    <equipmentDetectParam-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :detect-equipment-area-id="listQuery.detectEquipmentAreaId" @refreshDataList="getList" />
  </el-container>
</template>

<script>import i18n from '@/lang'
import { equipmentDetectParamList, equipmentDetectParamDelete } from '@/api/basicData/Equipment/equipmentDetectParam'
import { equipmentDetectTreeList } from '@/api/basicData/Equipment/equipmentDetectArea'
import BaseTable from '@/components/BaseTable'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import equipmentDetectParamAttrAdd from './equipmentDetectParamAttr-add'
import basicData from '@/filters/basicData'

const tableBtn = [
  {
    type: 'edit',
    btnName: 'btn.edit'
  },
  {
    type: 'delete',
    btnName: 'btn.delete'
  }
]
const tableProps = [
  {
    prop: 'name',
    label: i18n.t('module.basicData.equipmentDetectInfo.TestParameterName'),
    align: 'center',
    width: '200px'
  },
  {
    prop: 'value',
    label: i18n.t('module.basicData.equipmentDetectInfo.ReferenceValue'),
    align: 'center'
  },
  {
    prop: 'distribution',
    label: i18n.t('module.basicData.equipmentDetectInfo.IssueOrNot'),
    filter: basicData('onDuty'),
    align: 'center'
  },
  {
    prop: 'testFrequency',
    label: i18n.t('module.basicData.equipmentDetectInfo.TestFrequency'),
    align: 'center'
  },
  {
    prop: 'testSystem',
    label: i18n.t('module.basicData.equipmentDetectInfo.TestSystem'),
    align: 'center'
  },
  {
    prop: 'description',
    label: i18n.t('module.basicData.visual.Description'),
    align: 'center'
  },
  {
    prop: 'remark',
    label: i18n.t('module.basicData.visual.Remarks'),
    align: 'center'
  }
]

export default {
  components: { BaseTable, MethodBtn, equipmentDetectParamAttrAdd },
  data() {
    return {
      keyName: i18n.t('module.basicData.visual.keyword'),
      placeholderName: this.$t('module.basicData.equipmentDetectInfo.TestParameterName'),
      addOrUpdateVisible: false,
      menuList: [],
      tableBtn,
      trueWidth: 200,
      tableProps,
      list: [],
      listQuery: {
        detectEquipmentAreaId: '',
        detectEquipmentAreaName: '',
        name: '',
        current: 1,
        size: 10
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      const TreeListQuery = {
        current: 1,
        size: 500
      }
      this.menuList.splice(0, this.menuList.length)
      this.menuList = [
        {
          'name': '全部',
          'children': []
        }
      ]
      const res = await equipmentDetectTreeList(TreeListQuery)
      if (res.code === 0) {
        this.menuList[0].children = res.data
        if (this.menuList[0].children) {
          this.menuList[0].children.forEach(item => {
            item.name = item.detectArea
            if (item.detectSystemVoList) {
              item.children = item.detectSystemVoList
              item.detectSystemVoList.forEach(item1 => {
                if (item1.equipmentVoList) { item1.children = item1.equipmentVoList }
              })
            }
          })
        }
      }
      this.getList()
    },
    getList() {
      equipmentDetectParamList(this.listQuery).then(response => {
        if (response.data.records) {
          this.list = response.data.records
        } else {
          this.list.splice(0, this.list.length)
        }
      })
    },
    getOrganization(data) {
      if (data.detectEquipmentAreaId) {
        this.listQuery.detectEquipmentAreaId = data.detectEquipmentAreaId
        this.listQuery.detectEquipmentAreaName = data.name
        this.getList()
      } else {
        this.listQuery.detectEquipmentAreaId = ''
        this.listQuery.detectEquipmentAreaName = ''
      }
    },
    handleClick(raw) {
      if (raw.type === 'delete') {
        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
          type: 'warning'
        }).then(() => {
          equipmentDetectParamDelete(raw.data.id).then(response => {
            this.$message({
              message: this.$t('module.basicData.visual.success'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getList()
              }
            })
          })
        }).catch(() => {})
      } else {
        this.addNew(raw.data.id)
      }
    },
    // 新增 / 修改
    addNew(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    }
  }
}
</script>

<style scoped>
.drawer-footer {
  width: 100%;
  margin-top: 50px;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 50px;
  text-align: left;
  background: #fff;
}
.el-container >>> .el-aside{
  border:2px solid #E4E4E4;
  border-radius:10px;
  background-color: white;
  min-height:550px;
  padding-top:20px
}
</style>