提交

src/views/materials/materialOutbound/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="材料名称" prop="materialName">
+              <el-input v-model="queryParams.materialName" placeholder="请输入材料名称" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="tableList"
+        :row-key="
+          (row) => {
+            return row.id;
+          }
+        "
+        @row-click="
+          (row, column, event) => {
+            // 阻止点击行时自动展开
+            if (column.property) event.stopPropagation();
+          }
+        "
+        :preserve-expanded-content="true"
+      >
+        <el-table-column type="expand">
+          <template #default="{ row }">
+            <outbound :row="row.children ?? []" @success="getTableList" />
+          </template>
+        </el-table-column>
+        <el-table-column label="序号" type="index" width="60" align="center" />
+        <el-table-column label="材料名称" align="center" prop="materialsName" />
+        <el-table-column label="规格" align="center" prop="typeSpecificationName" />
+        <el-table-column label="计量单位" align="center" prop="weightId" />
+        <el-table-column label="材料数量" align="center" prop="quantityCount" />
+        <el-table-column label="剩余量" align="center" prop="residue" />
+        <el-table-column label="操作人" align="center" prop="operator"> </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-button link type="primary" icon="Plus" @click="handleoutbound(scope.row)"> 新增出库 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getTableList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { outboundMaterials } from '@/api/materials/materialOutbound';
+import { useUserStoreHook } from '@/store/modules/user';
+import outbound from './component/outbound.vue';
+import { number } from 'vue-types';
+const { proxy } = getCurrentInstance() as any;
+const queryFormRef = ref();
+const queryParams = ref({
+  materialName: '',
+  pageNum: 1,
+  pageSize: 10
+});
+const total = ref(0);
+const loading = ref(false);
+const tableList = ref([]);
+// 获取用户 store
+const userStore = useUserStoreHook();
+
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+//获取列表数据
+const getTableList = async () => {
+  try {
+    loading.value = true;
+    const res = await outboundMaterials({ ...queryParams.value, projectId: currentProject.value?.id });
+    if (res.code === 200) {
+      loading.value = false;
+      tableList.value = res.rows;
+      total.value = res.data.total;
+    }
+  } catch (error) {
+    loading.value = false;
+  }
+};
+getTableList();
+// 出入库
+const handleoutbound = (row: any) => {
+  console.log(row);
+  if (row.children == null) {
+    row.children = [];
+  }
+  if (row.children.some((child) => child.type === 'add')) {
+    ElMessage.warning('已经存在出库记录，不能重复添加');
+    return;
+  }
+  row.children.push({
+    type: 'add',
+    id: row.id,
+    number: 0,
+    operator: '',
+    shipper: '',
+    recipient: '',
+    residue: row.residue,
+    materialsName: row.materialsName
+  });
+  // 手动触发展开行
+  const table = document.querySelector('.el-table__body-wrapper');
+  const rows = table?.querySelectorAll('.el-table__row');
+  const rowEl = rows?.[Array.from(tableList.value).indexOf(row)];
+  const expandBtn: any = rowEl?.querySelector('.el-table__expand-icon');
+  // 如果行未展开，则点击展开按钮
+  if (expandBtn && !expandBtn.classList.contains('el-table__expand-icon--expanded')) {
+    expandBtn.click();
+  }
+};
+//搜索
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getTableList();
+};
+
+//重置
+const resetQuery = () => {
+  console.log(111111111);
+
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+</script>
+
+<style scoped></style>