物料页面

src/views/sto/main/material.vue

@@ -0,0 +1,349 @@
+<template>
+  <div>
+    <el-card :body-style="cardBodyStyle">
+      <el-form :inline="true" label-position="right" label-width="100px">
+        <el-form-item label="" class="no-show-error-message">
+          <el-input v-model="queryParams.material" size="small" placeholder="请输入物料名称或编码" style="width:300px;float: left;margin-right: 10px;"></el-input>
+          <el-input v-model="queryParams.standard" size="small" placeholder="请输入钢种" style="width:300px;float: left;margin-right: 10px;"></el-input>
+          <el-button v-prevent-re-click type="primary" plain @click="handleSearch">查询</el-button>
+          <el-button v-prevent-re-click type="primary" @click="handleAdd">新增</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card :body-style="cardBodyStyle">
+      <el-table :data="tableData" border v-loading="loading" style="width: 100%">
+        <el-table-column prop="materialName" label="物料名称" width="150" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialCode" label="物料编码" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialStandard" label="钢种" width="150" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialModel" label="尺寸" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialAttr1" label="属性1" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialAttr2" label="属性2" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialAttr3" label="属性3" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialAttr4" label="属性4" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column prop="materialAttr5" label="属性5" width="120" header-align="center" align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
+          <template #default="scope">
+            <el-button plain type="warning" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button plain type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.currentPage"
+          :page-sizes="pagination.pageSizes"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.totalRows">
+      </el-pagination>
+    </el-card>
+
+    <!-- 新增/编辑对话框 -->
+    <el-dialog
+        :close-on-click-modal="false"
+        :title="form.id ? '编辑物料' : '新增物料'"
+        v-model="dialogVisible"
+        width="600px">
+      <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
+        <el-form-item label="物料名称" prop="materialName">
+          <el-input v-model="form.materialName" style="width: 400px;" placeholder="请输入物料名称"></el-input>
+        </el-form-item>
+        <el-form-item label="物料编码" prop="materialCode">
+          <el-input v-model="form.materialCode" style="width: 400px;" placeholder="请输入物料编码"></el-input>
+        </el-form-item>
+        <el-form-item label="钢种" prop="materialStandard">
+          <el-input v-model="form.materialStandard" style="width: 400px;" placeholder="请输入钢种"></el-input>
+        </el-form-item>
+        <el-form-item label="尺寸">
+          <el-input v-model="form.materialModel" style="width: 400px;" placeholder="请输入尺寸"></el-input>
+        </el-form-item>
+        <el-form-item label="属性1">
+          <el-input v-model="form.materialAttr1" style="width: 400px;" placeholder="请输入属性1"></el-input>
+        </el-form-item>
+        <el-form-item label="属性2">
+          <el-input v-model="form.materialAttr2" style="width: 400px;" placeholder="请输入属性2"></el-input>
+        </el-form-item>
+        <el-form-item label="属性3">
+          <el-input v-model="form.materialAttr3" style="width: 400px;" placeholder="请输入属性3"></el-input>
+        </el-form-item>
+        <el-form-item label="属性4">
+          <el-input v-model="form.materialAttr4" style="width: 400px;" placeholder="请输入属性4"></el-input>
+        </el-form-item>
+        <el-form-item label="属性5">
+          <el-input v-model="form.materialAttr5" style="width: 400px;" placeholder="请输入属性5"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="success" @click="handleSave">保存</el-button>
+          <el-button type="danger" @click="handleCancelSave">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import axios from '@/axios'
+export default {
+  name: 'MaterialManagement',
+  data() {
+    return {
+      // 表格数据
+      tableData: [],
+      loading: false,
+
+      // 分页参数
+      pagination: {
+        currentPage: 1,
+        totalRows: 0,
+        pageSizes: [50, 100, 200, 500],
+        pageSize: 50
+      },
+
+      // 查询条件
+      queryParams: {
+        material: '',
+        standard: ''
+      },
+
+      // 对话框控制
+      dialogVisible: false,
+
+      // 表单数据
+      form: {
+        id: '',
+        materialName: '',
+        materialCode: '',
+        materialStandard: '',
+        materialModel: '',
+        materialAttr1: '',
+        materialAttr2: '',
+        materialAttr3: '',
+        materialAttr4: '',
+        materialAttr5: ''
+      },
+
+      // 表单验证规则
+      rules: {
+        materialName: [
+          { required: true, message: '物料名称不能为空', trigger: 'blur' }
+        ],
+        materialCode: [
+          { required: true, message: '物料编码不能为空', trigger: 'blur' }
+        ],
+        materialStandard: [
+          { required: true, message: '钢种不能为空', trigger: 'blur' }
+        ]
+      },
+
+      // 样式
+      cardBodyStyle: {
+        padding: '10px'
+      }
+    }
+  },
+
+  // 界面渲染完毕调用 - 初始化表格数据
+  mounted() {
+    this.getTableData()
+  },
+
+  methods: {
+    /**
+     * 获取表格数据
+     */
+    getTableData() {
+      this.loading = true
+      const url = 'sto/Material/query'
+      const params = {
+        page: this.pagination.currentPage,
+        rows: this.pagination.pageSize,
+        material: this.queryParams.material,
+        standard: this.queryParams.standard
+      }
+
+      axios.get(url, { params })
+          .then(response => {
+            this.loading = false
+            if (response.data.code === '0') {
+              this.tableData = response.data.data.records
+              this.pagination.totalRows = response.data.data.total
+            } else {
+              this.$message.error('查询失败！' + response.data.msg)
+            }
+          })
+          .catch(error => {
+            this.loading = false
+            this.$message.error('查询失败！' + error.message)
+          })
+    },
+
+    /**
+     * 修改每页条数
+     */
+    handleSizeChange(val) {
+      this.pagination.pageSize = val
+      this.pagination.currentPage = 1
+      this.getTableData()
+    },
+
+    /**
+     * 修改当前页
+     */
+    handleCurrentChange(val) {
+      this.pagination.currentPage = val
+      this.getTableData()
+    },
+
+    /**
+     * 查询
+     */
+    handleSearch() {
+      this.pagination.currentPage = 1
+      this.getTableData()
+    },
+
+    /**
+     * 新增
+     */
+    handleAdd() {
+      this.dialogVisible = true
+      this.resetForm()
+    },
+
+    /**
+     * 编辑
+     */
+    handleEdit(row) {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.form = { ...row }
+      })
+    },
+
+    /**
+     * 保存（新增和编辑）
+     */
+    handleSave() {
+      this.$refs.formRef.validate((valid) => {
+        if (!valid) {
+          this.$message.warning('请完善表单信息')
+          return
+        }
+
+        const url = 'sto/Material/save'
+        const params = {
+          json: JSON.stringify(this.form)
+        }
+
+        axios.post(url, params)
+            .then(response => {
+              if (response.data.code === '0') {
+                this.$message.success(this.form.id ? '更新成功' : '新增成功')
+                this.dialogVisible = false
+                this.getTableData()
+              } else {
+                this.$message.error('操作失败！' + response.data.msg)
+              }
+            })
+            .catch(error => {
+              this.$message.error('操作失败！' + error.message)
+            })
+      })
+    },
+
+    /**
+     * 取消保存
+     */
+    handleCancelSave() {
+      this.dialogVisible = false
+      this.resetForm()
+    },
+
+    /**
+     * 删除
+     */
+    handleDelete(row) {
+      this.$confirm(
+          `确定删除物料 "${row.materialName}" 吗？`,
+          '提示',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+            draggable: true,
+          }
+      )
+          .then(() => {
+            const url = 'sto/Material/remove'
+            const params = {
+              id: row.id,
+            }
+
+            axios.post(url, params)
+                .then(response => {
+                  if (response.data.code === '0') {
+                    this.$message.success('删除成功!')
+                    this.getTableData()
+                  } else {
+                    this.$message.error('删除失败！' + response.data.msg)
+                  }
+                })
+                .catch(error => {
+                  this.$message.error('删除失败！' + error.message)
+                })
+          })
+          .catch(() => {
+            this.$message.info('已取消删除')
+          })
+    },
+
+
+    /**
+     * 重置表单
+     */
+    resetForm() {
+      this.$nextTick(() => {
+        if (this.$refs.formRef) {
+          this.$refs.formRef.resetFields()
+        }
+        this.form = {
+          id: '',
+          materialName: '',
+          materialCode: '',
+          materialStandard: '',
+          materialModel: '',
+          materialAttr1: '',
+          materialAttr2: '',
+          materialAttr3: '',
+          materialAttr4: '',
+          materialAttr5: ''
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.no-show-error-message {
+  margin-bottom: 0;
+}
+
+.dialog-footer {
+  text-align: center;
+}
+</style>