<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">设备号：</span>
        <el-input v-model="searchForm.设备号" placeholder="请输入设备号" clearable size="small" style="width: 150px" />
        <span style="margin-left: 10px">设备名称：</span>
        <el-input v-model="searchForm.设备名称" placeholder="请输入设备名称" clearable size="small" style="width: 150px" />
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 10px" @click="searchData">查询</el-button>
        <el-button type="success" plain size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        tooltip-effect="dark"
        border
        size="mini"
        style="width: 700px"
      >
        <el-table-column align="center" type="index" width="60" label="序号" />
        <el-table-column align="center" label="设备号" prop="工位号" width="200" />
        <el-table-column align="center" label="设备名称" prop="工位名称"  />
        <el-table-column align="center" label="操作" width="140">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" style="color: #F56C6C" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px" :close-on-click-modal="false">
      <el-form ref="deviceForm" :model="deviceForm" :rules="deviceRules" label-width="80px">
        <el-form-item label="设备号" prop="设备号">
          <el-input v-model="deviceForm.设备号" placeholder="请输入设备号" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="设备名称" prop="设备名称">
          <el-input v-model="deviceForm.设备名称" placeholder="请输入设备名称" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件
      searchForm: { 设备号: '', 设备名称: '' },
      // 主表数据
      tableData: [],
      loading: false,
      // 弹窗
      dialogVisible: false,
      dialogTitle: '新增设备',
      isEdit: false,
      editKey: '', // 编辑时的原设备号
      deviceForm: { 设备号: '', 设备名称: '' },
      deviceRules: {
        设备号: [{ required: true, message: '请输入设备号', trigger: 'blur' }],
        设备名称: [{ required: true, message: '请输入设备名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.searchData()
  },
  methods: {
    // 查询数据
    searchData() {
      this.loading = true
      const param = [
        ['工位号', this.searchForm.设备号],
        ['工位名称', this.searchForm.设备名称]
      ]
      const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_条件查询', param)
      this.ExecDatabase(Data).then(res => {
        this.tableData = res.data || []
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // 新增
    handleAdd() {
      this.dialogTitle = '新增设备'
      this.isEdit = false
      this.editKey = ''
      this.deviceForm = { 设备号: '', 设备名称: '' }
      this.dialogVisible = true
      this.$nextTick(() => { this.$refs.deviceForm && this.$refs.deviceForm.clearValidate() })
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑设备'
      this.isEdit = true
      this.editKey = row.工位号
      this.deviceForm = { 设备号: row.工位号, 设备名称: row.工位名称 }
      this.dialogVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定删除该设备吗？', '提示', { type: 'warning' }).then(() => {
        const param = [['工位号', row.工位号]]
        const Data = this.CreateData('12', 'MES_计划BOM_工位与名称_删除', param)
        this.ExecDatabase(Data).then(res => {
          if (res.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchData()
          } else {
            this.$message.error(res.data[0].msg || '删除失败')
          }
        })
      }).catch(() => {})
    },
    // 提交表单
    submitForm() {
      this.$refs.deviceForm.validate(valid => {
        if (!valid) return
        const proc = this.isEdit ? 'MES_计划BOM_工位与名称_修改' : 'MES_计划BOM_工位与名称_新增'
        const param = [
          ['工位号', this.deviceForm.设备号],
          ['工位名称', this.deviceForm.设备名称]
        ]
        const Data = this.CreateData('12', proc, param)
        this.ExecDatabase(Data).then(res => {
          if (res.data[0].result === '1') {
            this.$message.success(this.isEdit ? '修改成功' : '新增成功')
            this.dialogVisible = false
            this.searchData()
          } else {
            this.$message.error(res.data[0].msg || '操作失败')
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.topCard {
  margin: 5px;
}
.topDiv {
  margin-bottom: 10px;
}
</style>

