家里的样式

src/views/Inventory/OfflinePartOut/index.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <el-row style="margin-bottom: 10px">
+        <span>物料名称：</span>
+        <el-input v-model="materialName" placeholder="物料名称" clearable size="small"/>
+        <span>物料规格：</span>
+        <el-input v-model="materialSpec" placeholder="物料规格" clearable size="small"/>
+      </el-row>
+      <span>物料型号：</span>
+      <el-input v-model="materialModel" placeholder="物料型号" clearable size="small"/>
+      <el-button size="small" type="success" icon="el-icon-search" style="margin: 0 0 0 10px" @click="pageCurrent1=1;pageSize1=10;total1=0;searchTable1()">查询</el-button>
+    </el-card>
+
+    <el-card>
+      <el-table v-loading="listLoading" :data="tableDataBasic" size="mini" border style="width: 100%;" height="440">
+        <el-table-column label="序号" align="center" type="index" width="50"/>
+        <el-table-column label="物料名称" align="center" min-width="120">
+          <template slot-scope="scope">
+            {{ scope.row.物料名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="物料型号" align="center" min-width="120">
+          <template slot-scope="scope">
+            {{ scope.row.物料型号 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="物料规格" align="center" min-width="120">
+          <template slot-scope="scope">
+            {{ scope.row.物料规格 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="仓库名称" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.仓库名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="货位名称" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.货位名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="可出库数量" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.货位存量 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250">
+          <template slot-scope="scope" align="center">
+            <el-button size="mini" type="success" icon="el-icon-search" @click="pageCurrent2=1;pageSize2=10;total2=0;searchoutRecord(scope.row)">查看领用情况</el-button>
+            <el-button :disabled="Number(scope.row.货位存量)===0" size="mini" type="primary" icon="el-icon-sort-up" @click="parOut(scope.row)">出库</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block" style="margin-top: 10px;">
+        <el-pagination
+          :current-page="pageCurrent1"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageSize1"
+          :total="total1"
+          style="display:inline-block;width:50%"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange1"
+          @current-change="handleCurrentChange1"/>
+      </div>
+    </el-card>
+
+    <el-card>
+      <el-table v-loading="listLoading1" :data="tableDataOut" size="mini" border style="width: 100%;" height="250">
+        <el-table-column label="序号" align="center" type="index" width="50"/>
+        <el-table-column label="物料名称" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.物料名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="物料规格" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.物料规格 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="物料型号" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.物料型号 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="出库数量" align="center" width="80">
+          <template slot-scope="scope">
+            {{ scope.row.出库数量 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="出库时间" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.出库时间 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="项目名称" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.项目名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="机床图号" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.机床图号 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="组号" align="center" min-width="80">
+          <template slot-scope="scope">
+            {{ scope.row.组号 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="出库人" align="center" width="80">
+          <template slot-scope="scope">
+            {{ scope.row.出库人姓名 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" min-width="140">
+          <template slot-scope="scope">
+            {{ scope.row.备注 }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="block" style="margin-top: 10px;">
+        <el-pagination
+          :current-page="pageCurrent2"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageSize2"
+          :total="total2"
+          style="display:inline-block;width:50%"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange2"
+          @current-change="handleCurrentChange2"/>
+      </div>
+    </el-card>
+    <!--零件出库对话框-->
+    <el-dialog :visible.sync="dialogFormVisible" title="零件出库" center width="380px">
+      <el-form ref="form" :model="form" :rules="rules" label-position="left">
+        <el-form-item label="项目" prop="ProjectValue" label-width="100px">
+          <el-select v-model="form.ProjectValue" filterable size="small" placeholder="项目" style="width: 200px;margin-right:10px" @change="searchMachine()">
+            <el-option
+              v-for="item in Project"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="机床" prop="MachineValue" label-width="100px">
+          <el-select v-model="form.MachineValue" filterable size="small" placeholder="机床" style="width: 200px;margin-right:10px" @change="searchGroupList()">
+            <el-option
+              v-for="item in Machine"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="分组" prop="GroupNumValue" label-width="100px">
+          <el-select v-model="form.GroupNumValue" filterable size="small" placeholder="分组" style="width: 200px;margin-right:10px">
+            <el-option
+              v-for="item in GroupNum"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="出库数量" prop="DirectNumber" label-width="100px" size="small">
+          <el-input v-model="form.DirectNumber" size="small" placeholder="出库数量" style="width: 200px"/>
+        </el-form-item>
+        <el-form-item label="出库人" prop="PeopleValue" label-width="100px">
+          <el-select v-model="form.PeopleValue" :disabled="true" size="small" style="width: 200px;margin-right:10px">
+            <el-option
+              v-for="item in People"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="领料人" prop="DirectNote" label-width="100px">
+          <el-input v-model="form.DirectNote" size="small" placeholder="请输入领料人" style="width: 200px"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="callOff('form')">取消</el-button>
+        <el-button type="primary" @click="addDirectPartm()">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { initProject, searchmachine, searchTeam, searchPart, searchPeople, outlinePartOut, outRecord } from '@/api/Inventory/OfflinePartOut'
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    const checkNum = (rule, value, callback) => {
+      if (value <= 0) {
+        callback(new Error('请输入正整数'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      Project: [],
+      Machine: [],
+      GroupNum: [],
+      tableDataBasic: [],
+      People: [],
+      dialogFormVisible: false,
+      form: {
+        ProjectValue: '',
+        MachineValue: '',
+        GroupNumValue: '',
+        DirectNumber: '',
+        PeopleValue: '',
+        DirectNote: ''
+      },
+      rules: { // 表单验证规则
+        ProjectValue: [{ required: true, message: '请选择项目', trigger: 'blur' }],
+        MachineValue: [{ required: true, message: '请选择机床', trigger: 'blur' }],
+        // GroupNumValue: [{ required: true, message: '请选择分组', trigger: 'blur' }],
+        DirectNumber: [
+          { required: true, message: '请输入数量', trigger: 'blur' },
+          { validator: checkNum, trigger: 'blur' }
+        ],
+        DirectNote: [{ required: true, message: '请输入领料人', trigger: 'blur' }]
+      },
+      locateNumber: '',
+      materialNumber: '',
+      PeopleNumber: '',
+      tableDataOut: [],
+      listLoading: '',
+      listLoading1: '',
+      partnumber: '',
+      pageCurrent1: 1,
+      pageSize1: 10,
+      total1: 0,
+      pageCurrent2: 1,
+      pageSize2: 10,
+      total2: 0,
+      materialName: '', // 物料名称
+      materialSpec: '', // 物料规格
+      materialModel: '', // 物料型号
+      离线合同明细流水号: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'id',
+      'token'
+    ])
+  },
+  created() {
+    this.searchTable1()
+    this.fetchData()
+    this.searchPeopleData()
+    this.getpeopleid()
+  },
+  methods: {
+    fetchData() {
+      this.getSelect(initProject, ['项目名称', '项目流水号'], 'Project') // 项目名称
+    },
+    // 获取人员编号
+    getpeopleid() {
+      this.PeopleNumber = this.id
+    },
+    searchMachine() { // 查询机床
+      this.Machine = []
+      this.form.MachineValue = ''
+      this.GroupNum = []
+      this.form.GroupNumValue = ''
+      searchmachine(this.form.ProjectValue).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.Machine.push({
+            label: response.data[i].机床图号,
+            value: response.data[i].机床流水号
+          })
+        }
+      })
+    },
+    searchGroupList() { // 查询组号
+      this.GroupNum = []
+      this.form.GroupNumValue = ''
+      searchTeam(this.form.MachineValue).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.GroupNum.push({
+            label: response.data[i].组号,
+            value: Number(response.data[i].组件流水号)
+          })
+        }
+      })
+    },
+    // 离线件查询
+    searchTable1() {
+      this.listLoading = true
+      this.tableDataBasic = []
+      let check1, check2, check3
+      this.materialName ? check1 = 1 : check1 = 0
+      this.materialSpec ? check2 = 1 : check2 = 0
+      this.materialModel ? check3 = 1 : check3 = 0
+      searchPart(check1, this.materialName, check2, this.materialSpec, check3, this.materialModel, this.pageCurrent1, this.pageSize1).then(response => {
+        this.tableDataBasic = response.data.rows
+        this.total1 = response.data.total
+        this.listLoading = false
+      })
+    },
+    handleSizeChange1(val) {
+      this.pageSize1 = val
+      this.pageCurrent1 = 1
+      this.searchTable1()
+    },
+    handleCurrentChange1(val) {
+      this.pageCurrent1 = val
+      this.searchTable1()
+    },
+    // 离线记录查询
+    searchoutRecord(row) {
+      // 物料流水号查
+      this.materialNumber = row.物料流水号
+      this.listLoading1 = true
+      outRecord(this.materialNumber, this.pageCurrent2, this.pageSize2).then(response => {
+        this.tableDataOut = response.data.rows
+        this.total2 = response.data.total
+        this.listLoading1 = false
+      })
+    },
+    handleSizeChange2(val) {
+      this.pageSize2 = val
+      this.pageCurrent2 = 1
+      this.listLoading1 = true
+      outRecord(this.materialNumber, this.pageCurrent2, this.pageSize2).then(response => {
+        this.tableDataOut = response.data.rows
+        this.total2 = response.data.total
+        this.listLoading1 = false
+      })
+    },
+    handleCurrentChange2(val) {
+      this.pageCurrent2 = val
+      this.listLoading1 = true
+      outRecord(this.materialNumber, this.pageCurrent2, this.pageSize2).then(response => {
+        this.tableDataOut = response.data.rows
+        this.total2 = response.data.total
+        this.listLoading1 = false
+      })
+    },
+    // 打开表单
+    parOut(row) {
+      this.dialogFormVisible = true
+      this.locateNumber = row.货位流水号
+      this.materialNumber = row.物料流水号
+      this.partnumber = row.货位存量
+      this.离线合同明细流水号 = row.离线合同明细流水号
+    },
+    // 重置表单
+    callOff() {
+      this.form.DirectNumber = ''
+      this.form.DirectNumberx = ''
+      this.form.DirectNote = ''
+      this.dialogFormVisible = false
+    },
+    searchPeopleData() { // 查询人员
+      searchPeople(this.token).then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.People.push({
+            label: response.data[i].姓名,
+            value: response.data[i].考勤编号
+          })
+        }
+      })
+    },
+    // 离线外购件出库
+    addDirectPartm() {
+      if (Number(this.partnumber) < Number(this.form.DirectNumber)) {
+        this.$message.error('请正确输入数量')
+      } else {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            outlinePartOut(this.form.PeopleValue, this.form.DirectNumber, this.locateNumber, this.form.DirectNote, this.form.ProjectValue, this.form.MachineValue, this.form.GroupNumValue, this.materialNumber, this.PeopleNumber, this.离线合同明细流水号).then(response => {
+              if (response.data[0].result === '1') {
+                this.$message.success('零件出库成功')
+                this.dialogFormVisible = false
+                this.searchTable1()
+                // 物料流水号查
+                outRecord(this.materialNumber, this.pageCurrent2, this.pageSize2).then(response => {
+                  this.tableDataOut = response.data.rows
+                  this.total2 = response.data.total
+                  this.listLoading1 = false
+                })
+              } else {
+                this.$message.error('零件出库失败')
+              }
+            })
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-card{
+    margin-bottom: 15px;
+  }
+  span{
+    margin: 10px 0 10px 10px;
+  }
+  .el-select{
+    width:200px
+  }
+  .el-input{
+    width:200px
+  }
+</style>