tft-fe/src/views/processManagement/processConfiguration.vue

<template>
  <div class="page-box">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
      @cascader-change="cascaderSelect"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="80"
        label="操作"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList"
    />
    <!-- 编辑 -->
    <base-dialog
      title="编辑"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <process-configuration-edit
        ref="processConfigurationEdit"
        @successSubmit="successSubmit"
      />
    </base-dialog>
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import ProcessConfigurationEdit from './components/processConfigurationEdit'
import { getTreeData } from '@/api/app'
import { getParamSet, getParamList } from '@/api/processManagement'
import { timeFormatter } from '@/utils'
const tableProps = [
  {
    prop: 'proLineName',
    label: '产线',
    minWidth: 80
  },
  {
    prop: 'unitName',
    label: '单元',
    minWidth: 100
  },
  {
    prop: 'eqName',
    label: '设备名称',
    minWidth: 100
  },
  {
    prop: 'variableName',
    label: '变量名称',
    minWidth: 150
  },
  {
    prop: 'paramName',
    label: '工艺参数',
    minWidth: 150
  },
  {
    prop: 'maxValue',
    label: '上限',
    minWidth: 80
  },
  {
    prop: 'minValue',
    label: '下限',
    minWidth: 80
  },
  {
    prop: 'updaterName',
    label: '更新人',
    minWidth: 100
  },
  {
    prop: 'updateTime',
    label: '更新时间',
    filter: timeFormatter,
    minWidth: 130
  }
]
const tableBtn = [
  {
    type: 'edit',
    btnName: '编辑'
  }
]
export default {
  name: 'ProcessConfiguration',
  components: { ProcessConfigurationEdit },
  data() {
    return {
      formConfig: [
        {
          type: 'cascader',
          label: '产线/单元/设备',
          cascaderProps: { checkStrictly: true, value: 'id', label: 'name' },
          selectOptions: [],
          param: 'keyword',
          onChange: true,
          width: 250
        },
        {
          type: 'select',
          label: '工艺参数',
          labelField: 'paramName',
          valueField: 'paramName',
          selectOptions: [],
          filterable: true,
          param: 'paramName',
          defaultSelect: '',
          width: 180
        },
        {
          type: 'input',
          label: '变量名称',
          placeholder: '变量名称',
          param: 'variableName'
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        }
      ],
      tableProps,
      tableBtn,
      tableData: [],
      tableH: tableHeight(280),
      total: 0,
      listQuery: {
        current: 1,
        size: 20,
        proLineId: '',
        unitId: '',
        equipmentId: '',
        paramName: '',
        variableName: ''
      },
      centervisible: false
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(280)
    })
    this.getTree()
    this.getList()
  },
  methods: {
    getList() {
      getParamSet({ ...this.listQuery }).then((res) => {
        console.log(res)
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    buttonClick(val) {
      console.log(val)
      this.listQuery.proLineId = val.keyword ? val.keyword[0] : ''
      this.listQuery.unitId = val.keyword
        ? val.keyword[1]
          ? val.keyword[1]
          : ''
        : ''
      this.listQuery.equipmentId = val.keyword
        ? val.keyword[2]
          ? val.keyword[2]
          : ''
        : ''
      this.listQuery.paramName = val.paramName ? val.paramName : ''
      this.listQuery.variableName = val.variableName ? val.variableName : ''
      this.getList()
    },
    cascaderSelect(val) {
      switch (val.value.length) {
        case 1:
          this.listQuery.proLineId = val.value[0]
          getParamList({
            current: 1,
            size: 1000,
            proLineId: this.listQuery.proLineId
          }).then((res) => {
            this.formConfig[1].selectOptions = res.data
          })
          break
        case 2:
          this.listQuery.proLineId = val.value[0]
          this.listQuery.unitId = val.value[1]
          getParamList({
            current: 1,
            size: 1000,
            proLineId: this.listQuery.proLineId,
            unitId: this.listQuery.unitId
          }).then((res) => {
            this.formConfig[1].selectOptions = res.data
          })
          break
        case 3:
          this.listQuery.proLineId = val.value[0]
          this.listQuery.unitId = val.value[1]
          this.listQuery.equipmentId = val.value[2]
          getParamList({
            current: 1,
            size: 1000,
            proLineId: this.listQuery.proLineId,
            unitId: this.listQuery.unitId,
            equipmentId: this.listQuery.equipmentId
          }).then((res) => {
            this.formConfig[1].selectOptions = res.data
          })
          break
        default:
          this.$refs.searchBarForm.resetForm()
          this.formConfig[1].selectOptions = []
      }
    },
    getTree() {
      getTreeData().then((res) => {
        this.formConfig[0].selectOptions = res.data
      })
    },
    handleClick(val) {
      if (val.type === 'edit') {
        this.centervisible = true
        this.$nextTick(() => {
          this.$refs.processConfigurationEdit.init(val.data.id)
        })
      }
    },
    handleCancel() {
      this.$refs.processConfigurationEdit.formClear()
      this.centervisible = false
    },
    handleConfirm() {
      this.$refs.processConfigurationEdit.submitForm()
    },
    successSubmit(res) {
      this.$message({
        message: res,
        type: 'success'
      })
      this.handleCancel()
      this.getList()
    }
  }
}
</script>