<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <span style="margin-left: 10px">工位号：</span>
        <el-select v-model="queryStationNumber" placeholder="工位号" clearable size="small" style="width: 110px">
          <el-option
            v-for="item in stationNumber"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            size="mini"/>
        </el-select>
        <span style="margin-left: 10px">物料名称：</span>
        <el-input v-model="queryMaterialName" placeholder="物料名称（模糊）" clearable size="small" style="width: 160px"/>
        <el-button type="primary" plain size="small" icon="el-icon-search" style="margin-left: 10px" @click="searchOrder()">查询</el-button>
        <el-button type="distribution" size="small" icon="el-icon-circle-plus" @click="openCreateDialog()">新增物料</el-button>
      </div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :cell-class-name="tableRowClassName"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        class="main"
        tooltip-effect="dark"
        height="740px"
        style="width: 100%"
        border
        size="mini">
        <el-table-column type="index" width="60" label="序号" align="center"/>
        <el-table-column align="center" label="工位号" prop="工位号"/>
        <el-table-column align="center" label="物料类型编号" prop="物料类型编号" width="120"/>
        <el-table-column align="center" label="物料名称" prop="物料名称" min-width="150"/>
        <el-table-column align="center" label="操作时间" prop="操作时间" width="160"/>
        <el-table-column align="center" label="操作" width="150">
          <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:#ff0000;"
              @click="deleteOrder(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <!-- 新增对话框 -->
    <el-dialog :visible.sync="dialogFormVisible" title="新增物料" center width="420px">
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="110px">
        <el-form-item label="工位号" prop="stationNumberValue">
          <el-select v-model="form.stationNumberValue" size="small" placeholder="请选择工位号" style="width:200px">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物料类型编号" prop="materialTypeNo">
          <el-input v-model.number="form.materialTypeNo" clearable size="small" placeholder="请输入物料类型编号" style="width:200px"/>
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="form.materialName" clearable size="small" placeholder="请输入物料名称" style="width:200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitAdd('form')">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog :visible.sync="dialogFormVisible1" title="修改物料" center width="420px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="right" label-width="110px">
        <el-form-item label="工位号" prop="stationNumberValue">
          <el-select v-model="form1.stationNumberValue" size="small" placeholder="请选择工位号" style="width:200px">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="物料类型编号" prop="materialTypeNo">
          <el-input v-model.number="form1.materialTypeNo" clearable size="small" placeholder="请输入物料类型编号" style="width:200px"/>
        </el-form-item>
        <el-form-item label="物料名称" prop="materialName">
          <el-input v-model="form1.materialName" clearable size="small" placeholder="请输入物料名称" style="width:200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" size="small" @click="submitEdit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MaterialVerificationMaintenance',
  data() {
    return {
      // 工位号列表
      stationNumber: [],
      // 查询条件
      queryStationNumber: '',
      queryMaterialName: '',
      // 新增表单
      form: {
        stationNumberValue: '',
        materialTypeNo: '',
        materialName: ''
      },
      rules: {
        stationNumberValue: [{ required: true, message: '请选择工位号', trigger: 'change' }],
        materialTypeNo: [{ required: true, message: '请输入物料类型编号', trigger: 'blur' }],
        materialName: [{ required: true, message: '请输入物料名称', trigger: 'blur' }]
      },
      // 修改表单
      form1: {
        ID: '',
        stationNumberValue: '',
        materialTypeNo: '',
        materialName: ''
      },
      rules1: {
        stationNumberValue: [{ required: true, message: '请选择工位号', trigger: 'change' }],
        materialTypeNo: [{ required: true, message: '请输入物料类型编号', trigger: 'blur' }],
        materialName: [{ required: true, message: '请输入物料名称', trigger: 'blur' }]
      },
      tableData: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      total: 0,
      pageSize: 30,
      pageCurrent: 1,
      loading: false
    }
  },
  created() {
    this.getStationNumber()
  },
  methods: {
    // 初始化工位号列表
    getStationNumber() {
      var param = []
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.stationNumber = response.data.map(item => ({
          label: item.工位号,
          value: item.工位号
        }))
        this.searchOrder()
      })
    },
    // 查询
    searchOrder() {
      this.loading = true
      this.tableData = []
      var param = []
      param[0] = ['工位号', this.queryStationNumber]
      param[1] = ['物料名称', this.queryMaterialName]
      var Data = this.CreateData('11', 'XD_物料清单_条件查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data || []
        this.total = this.tableData.length
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 打开新增对话框
    openCreateDialog() {
      if (this.$refs['form']) {
        this.$refs['form'].resetFields()
      }
      this.form.stationNumberValue = ''
      this.form.materialTypeNo = ''
      this.form.materialName = ''
      this.dialogFormVisible = true
    },
    // 提交新增
    submitAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var param = []
          param[0] = ['工位号', this.form.stationNumberValue]
          param[1] = ['物料类型编号', this.form.materialTypeNo]
          param[2] = ['物料名称', this.form.materialName]
          var Data = this.CreateData('12', 'XD_物料清单_新增', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0]['result'] === '1') {
              this.$message.success('新增成功')
              this.dialogFormVisible = false
              this.searchOrder()
            } else {
              this.$message.error(response.data[0]['msg'] || '新增失败')
            }
          })
        }
      })
    },
    // 打开修改对话框
    handleEdit(row) {
      if (this.$refs['form1']) {
        this.$refs['form1'].resetFields()
      }
      this.form1.ID = row.ID
      this.form1.stationNumberValue = row.工位号
      this.form1.materialTypeNo = row.物料类型编号
      this.form1.materialName = row.物料名称
      this.dialogFormVisible1 = true
    },
    // 提交修改
    submitEdit() {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          var param = []
          param[0] = ['ID', this.form1.ID]
          param[1] = ['工位号', this.form1.stationNumberValue]
          param[2] = ['物料类型编号', this.form1.materialTypeNo]
          param[3] = ['物料名称', this.form1.materialName]
          var Data = this.CreateData('12', 'XD_物料清单_修改', param)
          this.ExecDatabase(Data).then(response => {
            if (response.data[0]['result'] === '1') {
              this.$message.success('修改成功')
              this.dialogFormVisible1 = false
              this.searchOrder()
            } else {
              this.$message.error(response.data[0]['msg'] || '修改失败')
            }
          })
        }
      })
    },
    // 删除
    deleteOrder(row) {
      this.$confirm('此操作将永久删除该条物料, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['ID', row.ID]
        var Data = this.CreateData('12', 'XD_物料清单_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0]['result'] === '1') {
            this.$message.success('删除成功')
            this.searchOrder()
          } else {
            this.$message.error(response.data[0]['msg'] || '删除失败')
          }
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    // 表格行颜色
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'black' : 'red'
    },
    // 分页
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
    }
  }
}
</script>

<style scoped>
  .topCard {
    margin: 5px;
  }
  .topDiv {
    margin-bottom: 10px;
  }
  .el-select {
    width: 200px;
  }
  .el-input {
    width: 200px;
  }
  /deep/ .el-input.is-disabled .el-input__inner {
    color: #606266 !important;
    background-color: white !important;
  }
</style>
