From d13487486a3c3c7cf93bd3bda65dcc0d6af51aa2 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 03 六月 2025 17:37:04 +0800
Subject: [PATCH] 销售出库页面开发
---
src/views/warehouseManagement/index.vue | 189 ++++++++++++++++++++++++++++------------------
1 files changed, 115 insertions(+), 74 deletions(-)
diff --git a/src/views/warehouseManagement/index.vue b/src/views/warehouseManagement/index.vue
index 06ca93f..b0ce67e 100644
--- a/src/views/warehouseManagement/index.vue
+++ b/src/views/warehouseManagement/index.vue
@@ -53,40 +53,115 @@
/>
</el-tabs>
<!-- 鎿嶄綔鎸夐挳鍖� -->
- <el-row :gutter="24" class="table-toolbar">
- <el-button type="primary" :icon="Plus" >鏂板缓</el-button
- >
+ <el-space>
+ <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-row>
+ <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-space>
<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>
+ </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 +211,11 @@
setTimeout(() => {
// 鏆傛椂寮曞叆娴嬭瘯鏁版嵁
tableData.value = [
- { name: "渚涘簲鍟咥", type: "鍔ㄥ姏鐓�", unit: "鍚�", number: 100, money: 500 },
- { name: "渚涘簲鍟咥", type: "鍔ㄥ姏鐓�", unit: "鍚�", number: 100, money: 500 },
- { name: "渚涘簲鍟咮", type: "鐒︾叅", unit: "鍚�", number: 300, money: 789 },
- { name: "渚涘簲鍟咮", type: "鐒︾叅", unit: "鍚�", number: 256, money: 800 },
- { name: "渚涘簲鍟咰", type: "鏃犵儫鐓�", unit: "鍚�", number: 256, money: 700 }
+ { name: "渚涘簲鍟咥", type: "鍔ㄥ姏鐓�", unit: "鍚�", number: 120, money: 500, money1: 200, money2: 200, money3: 300, money4: '楂樹綅', createUser: 'admin', createTime: '2025-06-01' },
+ { name: "渚涘簲鍟咥", type: "鍔ㄥ姏鐓�", unit: "鍚�", number: 100, money: 600, money1: 300, money2: 300, money3: 300, money4: '浣庝綅', createUser: 'admin', createTime: '2025-06-01' },
+ { name: "渚涘簲鍟咮", type: "鐒︾叅", unit: "鍚�", number: 300, money: 789,money1: 400, money2: 400, money3: 400, money4: '楂樹綅', createUser: 'admin', createTime: '2025-06-01' },
+ { name: "渚涘簲鍟咮", type: "鐒︾叅", unit: "鍚�", number: 256, money: 800, money1: 420, money2: 420, money3: 420, money4: '浣庝綅', createUser: 'admin', createTime: '2025-06-01' },
+ { name: "渚涘簲鍟咰", 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 +232,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,64 +260,30 @@
// 鍏朵粬鍒椾笉鍚堝苟
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;
- margin-bottom: 20px;
- border-radius: 4px;
- box-shadow: var(--el-box-shadow-light);
-}
-.search-form :deep(.el-form-item) {
- margin-bottom: 16px;
- width: 100%;
-}
-
-/* 鍝嶅簲寮忓竷灞� */
-@media screen and (min-width: 768px) {
- .search-form :deep(.el-form-item) {
- width: 50%;
- }
-}
-@media screen and (min-width: 1200px) {
- .search-form :deep(.el-form-item) {
- width: 18%;
- }
-}
-
-.table-toolbar {
- margin-bottom: 20px;
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
-}
-
:deep(.el-table) {
- margin-bottom: 20px;
- overflow-x: auto;
-}
-
-:deep(.el-table th) {
- background-color: #f5f7fa;
-}
-
-/* 鍝嶅簲寮忔牱寮� */
-@media screen and (max-width: 768px) {
- :deep(.el-table) {
- width: 100%;
- overflow-x: auto;
- }
-}
-/* 琛ㄦ牸宸ュ叿鏍� */
-.table-toolbar, .table-toolbar > * {
- margin: 0 0 0 0 !important;
-}
-.table-toolbar{
- margin-bottom: 20px !important;
+ margin: 20px 0;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3