物料页面样式调整

src/views/sto/main/material.vue

@@ -1,349 +1,343 @@
 <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 :model="query" label-width="auto" label-position="right">
+        <el-row :gutter="10">
+          <el-col :span="5">
+            <el-form-item label="物料名称/编码" style="margin-bottom: 0px;">
+              <el-input v-model="query.material" clearable placeholder="请输入物料名称或编码" style="width:100%;"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="钢种" style="margin-bottom: 0px;">
+              <el-input v-model="query.standard" clearable placeholder="请输入钢种" style="width:100%;"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="" style="margin-bottom: 0px; margin-top: 5px;">
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+              <el-button type="success" @click="insertDialog">新增</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </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 :data="tableData" border highlight-current-row @selection-change="handleSelectionChange" :height="height">
+        <el-table-column type="selection" fixed></el-table-column>
+        <el-table-column type="index" label="序号" align="center" width="60">
+          <template #default="scope">
+            <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
+          </template>
         </el-table-column>
-        <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
+        <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="操作" header-align="center" align="center" width="200px" 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>
+            <el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button plain type="danger" @click="handleRemove(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
+    </el-card>
 
-      <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-card :body-style="cardBodyStyle">
+      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
+                     background layout="total, sizes, prev, pager, next, jumper"
+                     @size-change="handleSizeChange"
+                     @current-change="handleCurrentChange">
       </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>
+    <el-dialog class="diaClass" :close-on-click-modal="false" draggable :title="dialogTitle" v-model="dialogVisible" width="50%" top="5vh">
+      <el-card>
+        <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="物料名称" prop="materialName">
+                <el-input v-model="form.materialName" maxlength="100" placeholder="请输入物料名称"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="物料编码" prop="materialCode">
+                <el-input v-model="form.materialCode" maxlength="100" placeholder="请输入物料编码"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="钢种" prop="materialStandard">
+                <el-input v-model="form.materialStandard" maxlength="50" placeholder="请输入钢种"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="尺寸">
+                <el-input v-model="form.materialModel" maxlength="50" placeholder="请输入尺寸"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="属性1">
+                <el-input v-model="form.materialAttr1" maxlength="50" placeholder="请输入属性1"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="属性2">
+                <el-input v-model="form.materialAttr2" maxlength="50" placeholder="请输入属性2"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="属性3">
+                <el-input v-model="form.materialAttr3" maxlength="50" placeholder="请输入属性3"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="属性4">
+                <el-input v-model="form.materialAttr4" maxlength="50" placeholder="请输入属性4"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="属性5">
+                <el-input v-model="form.materialAttr5" maxlength="50" placeholder="请输入属性5"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="success" @click="handleSave">保存</el-button>
-          <el-button type="danger" @click="handleCancelSave">取消</el-button>
+          <el-button type="success" plain @click="handleSave(ruleFormRef)">保存</el-button>
+          <el-button type="danger" plain @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
-      },
+<script setup>
+import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
+import tools from '@/tools'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
-      // 查询条件
-      queryParams: {
-        material: '',
-        standard: ''
-      },
+const {
+  proxy
+} = getCurrentInstance()
 
-      // 对话框控制
-      dialogVisible: false,
+const cardBodyStyle = ref(tools.style.card)
+const inputStyle = ref(tools.style.input)
 
-      // 表单数据
-      form: {
-        id: '',
-        materialName: '',
-        materialCode: '',
-        materialStandard: '',
-        materialModel: '',
-        materialAttr1: '',
-        materialAttr2: '',
-        materialAttr3: '',
-        materialAttr4: '',
-        materialAttr5: ''
-      },
+/**
+ * 查询相关
+ */
+const query = ref({
+  material: '',
+  standard: ''
+})
 
-      // 表单验证规则
-      rules: {
-        materialName: [
-          { required: true, message: '物料名称不能为空', trigger: 'blur' }
-        ],
-        materialCode: [
-          { required: true, message: '物料编码不能为空', trigger: 'blur' }
-        ],
-        materialStandard: [
-          { required: true, message: '钢种不能为空', trigger: 'blur' }
-        ]
-      },
+const form = ref({
+  id: '',
+  materialName: '',
+  materialCode: '',
+  materialStandard: '',
+  materialModel: '',
+  materialAttr1: '',
+  materialAttr2: '',
+  materialAttr3: '',
+  materialAttr4: '',
+  materialAttr5: ''
+})
 
-      // 样式
-      cardBodyStyle: {
-        padding: '10px'
-      }
-    }
-  },
+const tableData = ref([])
 
-  // 界面渲染完毕调用 - 初始化表格数据
-  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)
-          })
-    },
+/**
+ * 分页相关
+ */
+const currentPage = ref(1)
+const totalRows = ref(0)
+const pageSizes = ref([10, 20, 30, 40])
+const pageSize = ref(10)
 
-    /**
-     * 修改每页条数
-     */
-    handleSizeChange(val) {
-      this.pagination.pageSize = val
-      this.pagination.currentPage = 1
-      this.getTableData()
-    },
+/**
+ * 对话框相关
+ */
+const dialogVisible = ref(false)
+const dialogTitle = ref('新增物料')
+const ruleFormRef = ref()
 
-    /**
-     * 修改当前页
-     */
-    handleCurrentChange(val) {
-      this.pagination.currentPage = val
-      this.getTableData()
-    },
+const rules = reactive({
+  materialName: [
+    {required: true, message: '物料名称不能为空', trigger: 'blur'},
+  ],
+  materialCode: [
+    {required: true, message: '物料编码不能为空', trigger: 'blur'},
+  ],
+  materialStandard: [
+    {required: true, message: '钢种不能为空', trigger: 'blur'},
+  ]
+})
 
-    /**
-     * 查询
-     */
-    handleSearch() {
-      this.pagination.currentPage = 1
-      this.getTableData()
-    },
+/**
+ * 方法定义
+ */
+const handleSearch = () => {
+  currentPage.value = 1
+  getTableData()
+}
 
-    /**
-     * 新增
-     */
-    handleAdd() {
-      this.dialogVisible = true
-      this.resetForm()
-    },
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
 
-    /**
-     * 编辑
-     */
-    handleEdit(row) {
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        this.form = { ...row }
-      })
-    },
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  getTableData()
+}
 
-    /**
-     * 保存（新增和编辑）
-     */
-    handleSave() {
-      this.$refs.formRef.validate((valid) => {
-        if (!valid) {
-          this.$message.warning('请完善表单信息')
-          return
-        }
+const insertDialog = () => {
+  form.value = {
+    id: '',
+    materialName: '',
+    materialCode: '',
+    materialStandard: '',
+    materialModel: '',
+    materialAttr1: '',
+    materialAttr2: '',
+    materialAttr3: '',
+    materialAttr4: '',
+    materialAttr5: ''
+  }
+  dialogTitle.value = '新增物料'
+  dialogVisible.value = true
+}
 
-        const url = 'sto/Material/save'
-        const params = {
-          json: JSON.stringify(this.form)
+const handleSave = (ruleFormRef) => {
+  if (!ruleFormRef) return
+  ruleFormRef.validate((valid) => {
+    if (valid) {
+      const url = 'sto/Material/save'
+      const param = {
+        json: JSON.stringify(form.value)
+      }
+      proxy.$axios.post(url, param).then(response => {
+        if (response.data.code == 0) {
+          ElMessage({
+            message: '保存成功',
+            type: 'success',
+          })
+          dialogVisible.value = false
+          handleSearch()
+        } else {
+          ElMessage({
+            type: 'error',
+            message: '操作失败: ' + response.data.msg
+          })
         }
-
-        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()
-    },
+const handleCancelSave = () => {
+  dialogVisible.value = false
+}
 
-    /**
-     * 删除
-     */
-    handleDelete(row) {
-      this.$confirm(
-          `确定删除物料 "${row.materialName}" 吗？`,
-          '提示',
-          {
-            confirmButtonText: '确认',
-            cancelButtonText: '取消',
-            type: 'warning',
-            draggable: true,
-          }
-      )
-          .then(() => {
-            const url = 'sto/Material/remove'
-            const params = {
-              id: row.id,
-            }
+const handleEdit = (row) => {
+  const url = 'sto/Material/queryByPK'
+  const param = {
+    id: row.id
+  }
+  proxy.$axios.get(url, param).then(response => {
+    if (response.data.code == '0') {
+      form.value = response.data.data
+      dialogTitle.value = '编辑物料'
+      dialogVisible.value = true
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
 
-            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('已取消删除')
-          })
-    },
+const handleRemove = (row) => {
+  ElMessageBox.confirm(
+      `确定删除物料 "${row.materialName}" 吗？`,
+      '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        draggable: true,
+      }
+  ).then(() => {
+    const url = 'sto/Material/remove'
+    const param = {
+      id: row.id
+    }
+    proxy.$axios.get(url, param).then(response => {
+      if (response.data.code == '0') {
+        ElMessage({
+          type: 'success',
+          message: '删除成功！',
+        })
+        getTableData()
+      } else {
+        ElMessage.error('操作失败！' + response.data.msg)
+      }
+    })
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消',
+    })
+  })
+}
 
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
 
-    /**
-     * 重置表单
-     */
-    resetForm() {
-      this.$nextTick(() => {
-        if (this.$refs.formRef) {
-          this.$refs.formRef.resetFields()
-        }
-        this.form = {
-          id: '',
-          materialName: '',
-          materialCode: '',
-          materialStandard: '',
-          materialModel: '',
-          materialAttr1: '',
-          materialAttr2: '',
-          materialAttr3: '',
-          materialAttr4: '',
-          materialAttr5: ''
-        }
-      })
-    }
+const getTableData = () => {
+  const url = 'sto/Material/query'
+  const param = {
+    page: currentPage.value,
+    rows: pageSize.value,
+    material: query.value.material,
+    standard: query.value.standard
   }
+  proxy.$axios.get(url, param).then(response => {
+    if (response.data.code == '0') {
+      tableData.value = response.data.data.records
+      totalRows.value = response.data.data.total
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
+
+const height = ref(600)
+const updateViewportHeight = () => {
+  height.value = window.innerHeight * 0.65
 }
+
+const multipleSelection = ref([])
+
+onMounted(() => {
+  getTableData()
+  updateViewportHeight()
+  window.addEventListener('resize', updateViewportHeight)
+})
 </script>
 
 <style scoped>
-.no-show-error-message {
-  margin-bottom: 0;
+::v-deep .diaClass .el-form-item {
+  width: 100%
 }
-
-.dialog-footer {
-  text-align: center;
+::v-deep .el-dialog__body {
+  background-color: #F2F6FC;
 }
 </style>