库存管理页面开发

gaoluyang

3 天以前 9ae3d71b25ce49060d8de9a81f4b97bcebef261b

库存管理页面开发

 src/assets/styles/index.scss

@@ -124,6 +124,8 @@
//main-container全局样式
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.components-container {

 src/views/warehouseManagement/index.vue

@@ -54,39 +54,115 @@
      </el-tabs>
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button type="primary" :icon="Plus" >新建</el-button
        >
        <el-button type="primary" :icon="Plus" >新建</el-button>
        <el-button type="danger" :icon="Delete">删除</el-button>
        <el-button type="info" :icon="Download">导出</el-button>
        <el-button type="info" plain :icon="Download">导出</el-button>
        <el-button type="success" plain :icon="Refresh" v-if="activeTab=== 'officialInventory'" @click="mergeRows">合并</el-button>
      </el-row>
      <div>
        <el-table :data="tableData" border :span-method="mergeSameRows">
        <el-table :data="tableData" border @selection-change="selectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" type="index" width="60" align="center" />
          <el-table-column prop="name" label="供货商名称" width="180" />
          <el-table-column prop="type" label="煤种" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="number" label="库存数量" />
          <el-table-column prop="money" label="单价（含税）" />
          <el-table-column prop="money1" label="总价（含税）" />
          <el-table-column prop="name" label="供货商名称" width="180" sortable/>
          <el-table-column prop="type" label="煤种" sortable/>
          <el-table-column prop="unit" label="单位" width="70"/>
          <el-table-column prop="number" label="库存数量" sortable/>
          <el-table-column prop="money" label="单价（含税）" sortable width="130"/>
          <el-table-column prop="money1" label="总价（含税）" width="130" />
          <el-table-column prop="money2" label="成本单价" />
          <el-table-column prop="money3" label="利润" />
          <el-table-column prop="money4" label="煤质" sortable/>
          <el-table-column prop="createUser" label="登记人" />
          <el-table-column prop="createTime" label="登记日期" />
          <el-table-column fixed="right" label="操作" min-width="90" align="center">
            <template #default>
              <el-button link type="primary" size="small">编辑</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
            v-if="total>0"
            :page-num="pageNum"
            :page-size="pageSize"
            :total="total"
            @pagination="handleQuery"
            :layout="'total, prev, pager, next, jumper'"
        />
      </div>
    </el-card>
    <!-- 合并数据弹框 -->
    <el-dialog title="合并库存" v-model="mergeVisible" width="800px">
      <el-form :model="form" :rules="rules" ref="userRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="供货商名称" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入手机号码" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="煤种" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入姓名" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单价(含税)" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入手机号码" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成本单价" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入姓名" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="煤质" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入手机号码" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {Delete, Download, Plus} from "@element-plus/icons-vue";
import {Delete, Download, Plus, Refresh} from "@element-plus/icons-vue";
import Pagination from "@/components/Pagination/index.vue";
const { proxy } = getCurrentInstance()

const tableData = ref([])
const selectedRows = ref([])
const columns = ref([])
const tableLoading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
// 合并弹框
const mergeVisible = ref(false)
const data = reactive({
  form: {},
  rules: {
    userName: [{ required: true, message: "登录账号不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    nickName: [{ required: true, message: "用户姓名不能为空", trigger: "blur" }],
    roleIds: [{ required: true, message: "角色不能为空", trigger: "change" }],
    deptId: [{ required: true, message: "部门不能为空", trigger: "change" }],
    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
  }
})

const { form, rules } = toRefs(data)
// 当前标签
const activeTab = ref("pendingInbound");
const tabName = ref("pendingInbound");
@@ -136,11 +212,11 @@
  setTimeout(() => {
    // 暂时引入测试数据
    tableData.value = [
      { name: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 500 },
      { name: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 500 },
      { name: "供应商B", type: "焦煤", unit: "吨", number: 300, money: 789 },
      { name: "供应商B", type: "焦煤", unit: "吨", number: 256, money: 800 },
      { name: "供应商C", type: "无烟煤", unit: "吨", number: 256, money: 700 }
      { name: "供应商A", type: "动力煤", unit: "吨", number: 120, money: 500, money1: 200, money2: 200, money3: 300, money4: '高位', createUser: 'admin', createTime: '2025-06-01' },
      { name: "供应商A", type: "动力煤", unit: "吨", number: 100, money: 600, money1: 300, money2: 300, money3: 300, money4: '低位', createUser: 'admin', createTime: '2025-06-01' },
      { name: "供应商B", type: "焦煤", unit: "吨", number: 300, money: 789,money1: 400, money2: 400, money3: 400, money4: '高位', createUser: 'admin', createTime: '2025-06-01'  },
      { name: "供应商B", type: "焦煤", unit: "吨", number: 256, money: 800, money1: 420, money2: 420, money3: 420, money4: '低位', createUser: 'admin', createTime: '2025-06-01'  },
      { name: "供应商C", type: "无烟煤", unit: "吨", number: 256, money: 700, money1: 300, money2: 300, money3: 300, money4: '高位', createUser: 'admin', createTime: '2025-06-01'  }
    ];
    total.value = tableData.value.length;
    tableLoading.value = false;
@@ -157,7 +233,7 @@
};
// 合并相同行的方法
const mergeSameRows = ({ row, column, rowIndex, columnIndex }) => {
  const fieldsToMerge = ['number', 'money']
  const fieldsToMerge = ['number', 'money', 'money1', 'money2', 'money3', 'money4', 'type', 'unit', 'name'];
  
  if (fieldsToMerge.includes(column.property)) {
    const prevRow = tableData.value[rowIndex - 1]
@@ -185,12 +261,29 @@
  // 其他列不合并
  return { rowspan: 1, colspan: 1 }
}
// 表格选择数据
const selectionChange = (rows) => {
  selectedRows.value = rows
}
// 合并库存数据方法
const mergeRows = () => {
  if (selectedRows.value.length < 2) {
    proxy.$modal.msgWarning('请至少选择两条数据')
    return
  }
  mergeVisible.value = true
}
// 提交合并表单
const submitForm = () => {

}
// 关闭合并表单
const cancel = () => {
  mergeVisible.value = false
}
</script>

<style scoped>
.app-container{
  box-sizing: border-box;
}
.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;