库房管理

src/views/sto/main/ware.vue

@@ -0,0 +1,495 @@
+<template>
+  <div>
+    <el-card :body-style="cardBodyStyle">
+      <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.wareNm" 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>
+    <ButtonBox @search="handleSearch" @add="insertDialog"></ButtonBox>
+    <el-card :body-style="cardBodyStyle">
+      <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 v-if="true" prop="wareNm" label="库房名称" width="150" header-align="center"
+                         align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column v-if="true" prop="wareCode" label="库房编码" width="150" header-align="center"
+                         align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column v-if="true" prop="wareLength" label="库房长度" width="150" header-align="center"
+                         align="center" show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column v-if="true" prop="wareWidth" label="库房宽度" width="150" 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" @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-card :body-style="cardBodyStyle">
+      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
+                     background="background" layout="total, sizes, prev, pager, next, jumper"
+                     @size-change="handleSizeChange"
+                     @current-change="handleCurrentChange">
+      </el-pagination>
+    </el-card>
+
+    <el-dialog class="diaClass"  :close-on-click-modal="false" draggable title="新增" v-model="dialogVisible" width="40%" top="5vh"
+               @open="openDialog">
+      <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="wareNm">
+              <el-input v-model="form.wareNm" maxlength="100" placeholder="请输入库房名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库房编码" prop="wareCode">
+              <el-input v-model="form.wareCode" maxlength="100"  placeholder="请输入库房编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库房长度" prop="wareLength">
+              <el-input v-model="form.wareLength"  maxlength="50" placeholder="请输入库房长度"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库房宽度" prop="wareWidth">
+              <el-input v-model="form.wareWidth" maxlength="50" placeholder="请输入库房宽度"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      </el-card>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="success" plain @click="handleInsert(ruleFormRef)">保存</el-button>
+          <el-button type="danger" plain @click="handleCancelSave">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <el-dialog class="diaClass"  :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisibleEdit" width="40%" top="5vh"
+               @open="openDialog">
+      <el-card :body-style="cardBodyStyle">
+      <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="wareNm">
+              <el-input v-model="form.wareNm" placeholder="请输入库房名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库房编码" prop="wareCode">
+              <el-input v-model="form.wareCode" placeholder="请输入库房编码"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库房长度" prop="wareLength">
+              <el-input v-model="form.wareLength" placeholder="请输入库房长度"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库房宽度" prop="wareWidth">
+              <el-input v-model="form.wareWidth" placeholder="请输入库房宽度"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+      </el-card>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="success" plain @click="handleSave(ruleFormRef)">保存</el-button>
+          <el-button type="danger" plain @click="handleCancelSave2">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+
+</template>
+
+<script setup>
+import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
+import tools from '@/tools'
+import ButtonBox from "@/components/ButtonBox.vue";
+
+const {
+  proxy
+} = getCurrentInstance()
+
+const cardBodyStyle = ref(tools.style.card)
+const inputStyle = ref(tools.style.input)
+
+
+
+const url = ref('sto/Ware/query')
+
+/**
+ *   查询
+ */
+
+const form = ref({
+  wareNm: '',
+  wareCode: '',
+  wareLength: '',
+  wareWidth: ''
+});
+
+const query = ref({
+  wareNm: '',
+  wareCode: '',
+  wareLength: '',
+  wareWidth: ''
+})
+const tableData = ref([])
+const TableBoxRef = ref(null)
+const handleSearch = () => {
+  // TableBoxRef.value.search()
+  getTableData()
+}
+
+
+
+
+/**
+ * 分页
+ */
+const currentPage = ref(1)
+const totalRows = ref(0)
+const pageSizes = ref([ 10, 20, 30, 40])
+const pageSize = ref(10)
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  getTableData()
+}
+/**
+ * 分页
+ */
+
+
+/**
+ * 新增
+ */
+const dialogVisible = ref(false)
+const dialogVisibleEdit = ref(false)
+
+const ruleFormRef = ref()
+
+const rules = reactive({
+  wareNm: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
+  ],
+  wareCode: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
+  ],
+  wareLength: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
+  ],
+  wareWidth: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
+  ],
+
+})
+
+const insertDialog = () => {
+  form.value = {
+    wareNm: '',
+    wareCode: '',
+    wareLength: '',
+    wareWidth: ''
+  }
+  dialogVisible.value = true
+}
+/**
+ * 新增
+ */
+
+
+/**
+ * 保存、修改、删除
+ */
+const refUpload = ref()
+
+const openDialog = () => {
+
+}
+
+
+const handleSave = (ruleFormRef) => {
+  if (!ruleFormRef) return
+  ruleFormRef.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+      var url = 'sto/Ware/save'
+      var param = {
+        json: JSON.stringify(form.value),
+
+      }
+      proxy.$axios.post(url, param).then(response => {
+        if (response.data.code == 0) {
+          ElMessage({
+            message: '保存成功',
+            type: 'success',
+          })
+          dialogVisibleEdit.value = false
+          handleSearch()
+        } else {
+          ElMessage({
+            type: 'error',
+            message: '操作失败' + response.data.msg
+          })
+        }
+      });
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+};
+const handleInsert = (ruleFormRef) => {
+  if (!ruleFormRef) return
+  ruleFormRef.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+      var url = 'sto/Ware/save'
+      var param = {
+        json: JSON.stringify(form.value),
+
+      }
+      console.log('form.value!' ,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
+          })
+        }
+      });
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+};
+
+const handleCancelSave = () => {
+  dialogVisible.value = false
+}
+const handleCancelSave2 = () => {
+  dialogVisibleEdit.value = false
+}
+
+const handleEdit = (row) => {
+  var url = 'sto/Ware/queryByPK'
+  var param = {
+    id: row.id
+  }
+  proxy.$axios.get(url, param).then(response => {
+    if (response.data.code == '0') {
+      form.value = response.data.data
+      console.log(form.value)
+      dialogVisibleEdit.value = true
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
+
+const handleRemove = (row) => {
+  var url = 'sto/Ware/remove'
+  var param = {
+    id: row.id
+  }
+  ElMessageBox.confirm(
+      '确定删除本条记录?',
+      '提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+        draggable: true,
+      }
+  )
+      .then(() => {
+        proxy.$axios.get(url, param).then(response => {
+          if (response.data.code == '0') {
+            console.log(response.data.data)
+            ElMessage({
+              type: 'success',
+              message: '删除成功！',
+            });
+            getTableData()
+          } else {
+            ElMessage.error('操作失败！' + response.data.msg)
+          }
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '已取消',
+        })
+      })
+
+
+}
+
+
+/**
+ * 保存、修改、删除
+ */
+
+const multipleSelection = ref([])
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+
+const handleRemoveBatch = () => {
+  console.log('handleRemoveBatch')
+
+  if (multipleSelection.value.length < 1) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择要删除的数据!'
+    })
+    return
+  }
+
+  ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    var ids = []
+    multipleSelection.value.forEach((item, index) => {
+      ids.push(item.id)
+    })
+    /* var url = 'cot/SignRequest/removeBatch'*/
+    var param = {
+      ids: JSON.stringify(ids)
+    }
+    proxy.$axios.post(url, param).then(response => {
+      if (response.data.code == '0') {
+        ElMessage({
+          type: 'success',
+          message: '操作成功!',
+        });
+        getTableData()
+        dialogVisible.value = false
+      } else {
+        ElMessage({
+          type: 'error',
+          message: '操作失败!' + response.data.msg
+        });
+      }
+    })
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除'
+    })
+  })
+}
+
+const handleEditBatch = () => {
+  console.log('handleEditBatch')
+  if (multipleSelection.value.length != 1) {
+    ElMessage({
+      type: 'warning',
+      message: '请选择一条数据编辑!'
+    })
+    return
+  }
+  handleEdit(multipleSelection.value[0])
+}
+
+const handleUpload = () => {
+  console.log('handleUpload')
+}
+
+const handleDownload = () => {
+  console.log('handleDownload')
+}
+
+const handleImport = () => {
+  console.log('handleImport')
+}
+
+const handleExport = () => {
+  console.log('handleExport')
+}
+const getTableData = () => {
+  var url = 'sto/Ware/query'
+  var param = {
+    page: currentPage.value,
+    rows: pageSize.value,
+    wareNm: query.value.wareNm,
+    wareCode: query.value.wareCode,
+    wareLength: query.value.wareLength,
+    wareWidth: query.value.wareWidth,
+    json: JSON.stringify(query.value)
+  }
+  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
+  console.log( window.innerHeight);
+};
+onMounted(() => {
+  getTableData()
+  updateViewportHeight()
+})
+</script>
+
+<style scoped>
+::v-deep .diaClass .el-form-item {
+  width: 100%
+}
+::v-deep .el-autocomplete{
+  width: 100%;
+}
+::v-deep .el-dialog__body {
+  background-color: #F2F6FC;
+}
+</style>
+