<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <el-row style="margin-bottom:-10px!important;">
          <el-input v-model="materialName" placeholder="名称规格型号" size="small" clearable style="margin-bottom: 10px; width: 180px;"/>
          <!--          <el-input v-model="materialSpec" placeholder="物料规格" size="small" style="margin-bottom: 10px; width: 120px;" clearable/>-->
          <!--          <el-input v-model="materialModel" placeholder="物料型号" size="small" style="margin-bottom: 10px; width: 120px;" clearable/>-->
          <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 10px" @click="pageCurrent=1;pageSize=30;searchMaterial()">查询</el-button>
          <!--          <el-button type="primary" icon="el-icon-edit" size="small" @click="addMaterial()">新增</el-button>-->
        </el-row>
      </div>
      <el-table :data="tableData1" stripe highlight-current-row border height="600px" style="width: 639px" size="mini">
        <el-table-column label="名称" prop="物料名称" align="center" width="150" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料名称 }}
          </template>
        </el-table-column>
        <el-table-column label="图号或型号" prop="物料型号" align="center" width="240" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料型号 }}
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="物料规格" align="center" width="130" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.物料规格 }}
          </template>
        </el-table-column>
        <!--<el-table-column label="物料来源" prop="物料来源" align="center" width="80">-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.物料来源 }}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--&lt;!&ndash;        <el-table-column label="仓库" prop="仓库名称" align="center" min-width="90">&ndash;&gt;-->
        <!--&lt;!&ndash;          <template slot-scope="scope">&ndash;&gt;-->
        <!--&lt;!&ndash;            {{ scope.row.仓库名称 }}&ndash;&gt;-->
        <!--&lt;!&ndash;          </template>&ndash;&gt;-->
        <!--&lt;!&ndash;        </el-table-column>&ndash;&gt;-->
        <!--<el-table-column label="货位" prop="货位名称" align="center" width="80">-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.货位名称 }}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="货位存量" align="center" width="100" prop="货位存量">
          <template slot-scope="scope">
            <template v-if="scope.row.changeValue">
              <el-input-number v-model="scope.row.货位存量" :min="0" :precision="2" controls-position="right" size="mini" style="width: 90px"/>
              <el-button class="cancel-btn" size="mini" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
            </template>
            <span v-else>{{ scope.row.货位存量 }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="操作" align="center" width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-button v-if="scope.row.changeValue" type="mini" size="mini" icon="el-icon-circle-check-outline" @click="confirmEdit(scope.row)">确定</el-button>-->
        <!--            <el-button v-else type="primary" icon="el-icon-edit" size="mini" plain @click="scope.row.changeValue=!scope.row.changeValue">编辑</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <div class="block" style="margin-top: 10px;">
        <el-pagination
          :current-page="pageCurrent"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--    <el-dialog v-el-drag-dialog :visible.sync="dialogVisible" title="新增" center style="min-height: 300px" width="880px">-->
    <!--      <el-row>-->
    <!--        <el-col style="width: 240px">-->
    <!--          <span>物料名称:</span>-->
    <!--          <el-input v-model="materialName" placeholder="物料名称" size="small" clearable style="margin-bottom: 10px;"/>-->
    <!--        </el-col>-->
    <!--        <el-col style="width: 240px">-->
    <!--          <span>物料规格:</span>-->
    <!--          <el-input v-model="materialSpec" placeholder="物料规格" size="small" style="margin-bottom: 10px;" clearable/>-->
    <!--        </el-col>-->
    <!--        <el-col style="width: 240px">-->
    <!--          <span>物料型号:</span>-->
    <!--          <el-input v-model="materialModel" placeholder="物料型号" size="small" style="margin-bottom: 10px;" clearable/>-->
    <!--        </el-col>-->
    <!--        <el-col style="width: 80px">-->
    <!--          <el-button type="success" icon="el-icon-search" size="small" @click="pageCurrent01=1;pageSize01=20;searchMaterial01()">查询</el-button>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--      <el-table :data="tableData01" border stripe highlight-current-row height="300" size="mini" style="margin-bottom: 10px" @row-click="selectMaterial">-->
    <!--        <el-table-column label="名称" align="center" min-width="100">-->
    <!--          <template slot-scope="scope">-->
    <!--            {{ scope.row.物料名称 }}-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="图号或型号" align="center" min-width="100">-->
    <!--          <template slot-scope="scope">-->
    <!--            {{ scope.row.物料型号 }}-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="规格" align="center" min-width="200">-->
    <!--          <template slot-scope="scope">-->
    <!--            {{ scope.row.物料规格 }}-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="供货商" align="center" min-width="100">-->
    <!--          <template slot-scope="scope">-->
    <!--            {{ scope.row.供货商 }}-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--      </el-table>-->
    <!--      <div class="block" style="margin: 10px 0">-->
    <!--        <el-pagination-->
    <!--          :current-page="pageCurrent01"-->
    <!--          :page-sizes="[10, 20, 30, 40, 50]"-->
    <!--          :page-size="pageSize01"-->
    <!--          :total="total01"-->
    <!--          layout="total, sizes, prev, pager, next, jumper"-->
    <!--          @size-change="handleSizeChange01"-->
    <!--          @current-change="handleCurrentChange01"/>-->
    <!--      </div><hr>-->
    <!--      <el-row>-->
    <!--        <el-col style="width: 210px">-->
    <!--          <span>仓库:</span>-->
    <!--          <el-select v-model="inventoryNameValue" style="margin-bottom: 10px;" size="small" clearable @change="getLocate">-->
    <!--            <el-option-->
    <!--              v-for="item in inventoryName"-->
    <!--              :key="item.value"-->
    <!--              :label="item.label"-->
    <!--              :value="item.value"/>-->
    <!--          </el-select>-->
    <!--        </el-col>-->
    <!--        <el-col style="width: 210px">-->
    <!--          <span>货位:</span>-->
    <!--          <el-select v-model="locateNameValue" style="margin-bottom: 10px;" size="small" clearable>-->
    <!--            <el-option-->
    <!--              v-for="item in locateName"-->
    <!--              :key="item.value"-->
    <!--              :label="item.label"-->
    <!--              :value="item.value"/>-->
    <!--          </el-select>-->
    <!--        </el-col>-->
    <!--        <el-col style="width: 210px">-->
    <!--          <span>货位存量:</span>-->
    <!--          <el-input-number v-model="localNumber" :min="0" :precision="2" placeholder="物料名称" size="small" clearable style="margin-bottom: 10px;"/>-->
    <!--        </el-col>-->
    <!--        <el-col style="width: 180px">-->
    <!--          <span>是否为滞货:</span>-->
    <!--          <el-checkbox v-model="isBacklog" size="small" label="滞货件" border style="border: 1px solid rgb(49,56,72)"/>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button size="small" @click="dialogVisible=false">取消</el-button>-->
    <!--        <el-button type="primary" size="small" @click="submitAdd">确定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
export default {
  data() {
    return {
      materialName: '',
      materialSpec: '',
      materialModel: '',
      tableData1: [],
      pageCurrent: 1,
      pageSize: 30,
      total: 0,
      dialogVisible: false,
      tableData01: [],
      pageCurrent01: 1,
      pageSize01: 10,
      total01: 0,
      localNumber: '',
      materialValue: '',
      isBacklog: false
    }
  },
  computed: {
    ...mapGetters([
      'id' // 人员编号
    ])
  },
  mounted() {
    this.initData()
    this.searchMaterial()
  },
  methods: {
    // 初始化数据
    initData() {
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: '库存管理_货位主文件_仓库查询'
        }
      }
      request(param).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          this.inventoryName.push({
            label: res.data[i].仓库名称,
            value: res.data[i].仓库流水号
          })
        }
      })
    },
    // 根据条件查物料货位数量
    searchMaterial() {
      let check1, check2, check3
      this.materialName ? check1 = 1 : check1 = 0
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `库存管理_库存盘点_物料货位数量_查询数据_新`,
          param: `物料名称_check=${check1}&物料名称=${this.materialName}&物料规格_check=${check2}&物料规格=${this.materialSpec}&物料型号_check=${check3}&物料型号=${this.materialModel}`,
          Pagination: this.pageCurrent + '&' + this.pageSize
        }
      }
      request(param).then(res => {
        this.tableData1 = res.data.rows
        this.tableData1.map(v => {
          this.$set(v, 'changeValue', false)
          v.原货位存量 = v.货位存量
          return v
        })
        this.total = res.data.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.pageCurrent = 1
      this.searchMaterial()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchMaterial()
    },
    // 取消设置
    cancelEdit(row) {
      row.货位存量 = row.原货位存量
      row.changeValue = false
      this.$message('取消修改')
    },
    // 确认设置
    confirmEdit(row) {
      Number(row.货位存量) ? row.货位存量 = Number(row.货位存量) : row.货位存量 = 0
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '2',
          name: `库存管理_库存盘点_物料货位数量_修改数据`,
          param: `货位存量=${row.货位存量}&物料流水号=${row.物料流水号}&货位流水号=${row.货位流水号}&物料来源=${row.物料来源}`
        }
      }
      request(param).then(res => {
        if (res.data[0].result === '1') {
          this.$message.success('操作成功')
          row.changeValue = false
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 新增物料货位数量
    addMaterial() {
      this.dialogVisible = true
    },
    // 选择物料
    selectMaterial(row) {
      this.materialValue = row.物料流水号
    },
    // 确认新增物料货位数量
    submitAdd() {
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '2',
          name: `库存管理_库存盘点_物料货位数量_增加数据`,
          param: `物料流水号=${this.materialValue}&货位流水号=${this.locateNameValue}&货位存量=${this.localNumber}&是否为滞货=${Number(this.isBacklog)}`
        }
      }
      request(param).then(res => {
        if (res.data[0].result === '1') {
          this.$message.success('操作成功')
          this.dialogVisible = false
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 查物料
    searchMaterial01() {
      let check1, check2, check3
      this.materialName ? check1 = 1 : check1 = 0
      this.materialSpec ? check2 = 1 : check2 = 0
      this.materialModel ? check3 = 1 : check3 = 0
      const param = {
        url: '',
        method: 'post',
        data: {
          type: '1',
          name: `库存管理_物料主文件_基本_查询数据_分页`,
          param: `物料名称_check=${check1}&物料名称=${this.materialName}&物料规格_check=${check2}&物料规格=${this.materialSpec}&物料型号_check=${check3}&物料型号=${this.materialModel}&PageCurrent=${this.pageCurrent01}=int&PageSize=${this.pageSize01}=int&PageCount=1=int=output&ItemCount=1=int=output`
        }
      }
      request(param).then(res => {
        this.tableData01 = res.data.result
        this.total01 = Number(res.data.output[0].ItemCount)
      })
    },
    // 分页
    handleSizeChange01(val) {
      this.pageSize01 = val
      this.pageCurrent01 = 1
      this.searchMaterial01()
    },
    handleCurrentChange01(val) {
      this.pageCurrent01 = val
      this.searchMaterial01()
    }
  }
}
</script>

<style scoped>
  .el-select{
    width:165px
  }
  .el-input{
    width:165px
  }
</style>

<!--<template>-->
<!--  <div class="app-container">-->
<!--    <el-card>-->
<!--      <div slot="header">-->
<!--        <el-row style="margin-bottom:-10px!important;">-->
<!--          <span>物料名称:</span>-->
<!--          <el-input v-model="materialName" placeholder="物料名称" size="small" clearable style="margin-bottom: 10px;"/>-->
<!--          <span>物料规格:</span>-->
<!--          <el-input v-model="materialSpec" placeholder="物料规格" size="small" style="margin-bottom: 10px;" clearable/>-->
<!--          <span>物料型号:</span>-->
<!--          <el-input v-model="materialModel" placeholder="物料型号" size="small" style="margin-bottom: 10px;" clearable/>-->
<!--          <el-button type="success" icon="el-icon-search" size="small" style="margin-left: 10px" @click="pageCurrent=1;pageSize=10;searchMaterial()">查询</el-button>-->
<!--        </el-row>-->
<!--      </div>-->
<!--      <el-table :data="tableData1" stripe border height="700px" size="mini" show-summary>-->
<!--        <el-table-column label="名称" prop="物料名称" align="center" width="130" show-overflow-tooltip>-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.物料名称 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="图号或型号" prop="物料型号" align="center" width="150" show-overflow-tooltip>-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.物料型号 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="规格" prop="物料规格" align="center" width="200" show-overflow-tooltip>-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.物料规格 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="物料来源" prop="物料来源" align="center" width="100">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.物料来源 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="仓库" prop="仓库名称" align="center" min-width="90">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.仓库名称 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="货位" align="center" min-width="90">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.货位名称 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="货位存量" align="center" width="150" prop="货位存量">-->
<!--          <template slot-scope="scope">-->
<!--            <template v-if="scope.row.changeValue">-->
<!--              <el-input-number v-model="scope.row.货位存量" :min="0" :precision="2" controls-position="right" size="mini" style="width: 90px"/>-->
<!--              <el-button class="cancel-btn" size="mini" type="warning" @click="cancelEdit(scope.row)">取消</el-button>-->
<!--            </template>-->
<!--            <span v-else>{{ scope.row.货位存量 }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <div class="block" style="margin-top: 10px;">-->
<!--        <el-pagination-->
<!--          :current-page="pageCurrent"-->
<!--          :page-sizes="[10, 20, 30, 40, 50]"-->
<!--          :page-size="pageSize"-->
<!--          :total="total"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"/>-->
<!--      </div>-->
<!--    </el-card>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { mapGetters } from 'vuex'-->
<!--import request from '@/utils/request'-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      materialName: '',-->
<!--      materialSpec: '',-->
<!--      materialModel: '',-->
<!--      tableData1: [],-->
<!--      pageCurrent: 1,-->
<!--      pageSize: 10,-->
<!--      total: 0-->
<!--    }-->
<!--  },-->
<!--  computed: {-->
<!--    ...mapGetters([-->
<!--      'id' // 人员编号-->
<!--    ])-->
<!--  },-->
<!--  mounted() {-->
<!--    this.searchMaterial()-->
<!--  },-->
<!--  methods: {-->
<!--    // 根据条件查物料货位数量-->
<!--    searchMaterial() {-->
<!--      // this.$router.push('/ManufacturingCenter/StatusQuery')-->
<!--      let check1, check2, check3-->
<!--      this.materialName ? check1 = 1 : check1 = 0-->
<!--      this.materialSpec ? check2 = 1 : check2 = 0-->
<!--      this.materialModel ? check3 = 1 : check3 = 0-->
<!--      const param = {-->
<!--        url: '',-->
<!--        method: 'post',-->
<!--        data: {-->
<!--          type: '1',-->
<!--          name: `库存管理_库存盘点_物料货位数量_查询数据`,-->
<!--          param: `物料名称_check=${check1}&物料名称=${this.materialName}&物料规格_check=${check2}&物料规格=${this.materialSpec}&物料型号_check=${check3}&物料型号=${this.materialModel}&仓库流水号_check=${0}&仓库流水号=${0}&货位流水号_check=${0}&货位流水号=${0}`,-->
<!--          Pagination: this.pageCurrent + '&' + this.pageSize-->
<!--        }-->
<!--      }-->
<!--      request(param).then(res => {-->
<!--        this.tableData1 = res.data.rows-->
<!--        this.tableData1.map(v => {-->
<!--          this.$set(v, 'changeValue', false)-->
<!--          v.原货位存量 = v.货位存量-->
<!--          return v-->
<!--        })-->
<!--        this.total = res.data.total-->
<!--      })-->
<!--    },-->
<!--    // 分页-->
<!--    handleSizeChange(val) {-->
<!--      this.pageSize = val-->
<!--      this.pageCurrent = 1-->
<!--      this.searchMaterial()-->
<!--    },-->
<!--    handleCurrentChange(val) {-->
<!--      this.pageCurrent = val-->
<!--      this.searchMaterial()-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--  .el-select{-->
<!--    width:165px-->
<!--  }-->
<!--  .el-input{-->
<!--    width:165px-->
<!--  }-->
<!--</style>-->
