优化

.env.development

@@ -6,13 +6,13 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 # 李陈杰 209
-# VITE_APP_BASE_API = 'http://192.168.110.209:8899'
+VITE_APP_BASE_API = 'http://192.168.110.209:8899'
 # 曾涛
 # VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 # 罗成
 # VITE_APP_BASE_API = 'http://192.168.110.188:8899'
 # 朱银
-VITE_APP_BASE_API = 'http://192.168.110.180:8899'
+# VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 #曾涛
 # VITE_APP_BASE_API = 'http://192.168.110.171:8899'
 

src/api/materials/materialOutbound/index.ts

@@ -0,0 +1,27 @@
+import request from '@/utils/request';
+
+//获取出库材料得列表
+export const outboundMaterials = (query?: any) => {
+  return request({
+    url: '/materials/materials/listRelevancy',
+    method: 'get',
+    params: query
+  });
+};
+//新增出库
+export const addOutbound = (data?: any) => {
+  return request({
+    url: '/materials/materialsInventory',
+    method: 'post',
+    data
+  });
+};
+
+//获取材料列表
+export const getMaterialsList = (query?: any) => {
+  return request({
+    url: '/materials/materials/list',
+    method: 'get',
+    params: query
+  });
+};

src/api/materials/materialsUseRecord/types.ts

@@ -33,7 +33,6 @@ export interface MaterialsUseRecordVO {
    * 备注
    */
   remark: string;
-
 }
 
 export interface MaterialsUseRecordForm extends BaseEntity {
@@ -71,11 +70,9 @@ export interface MaterialsUseRecordForm extends BaseEntity {
    * 备注
    */
   remark?: string;
-
 }
 
 export interface MaterialsUseRecordQuery extends PageQuery {
-
   /**
    * 项目ID
    */
@@ -105,7 +102,5 @@ export interface MaterialsUseRecordQuery extends PageQuery {
    * 日期范围参数
    */
   params?: any;
+  materialsId?: string | number;
 }
-
-
-

src/views/materials/materialOutbound/component/outbound.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="p-2">
+    <el-table size="small" v-if="props.row.length !== 0" :data="props.row">
+      <el-table-column label="材料名称" align="center" prop="materialsName" />
+      <!-- <el-table-column label="材料数量" align="center" prop="quantityCount" /> -->
+      <el-table-column label="剩余量" align="center" prop="residue">
+        <template #default="scope">
+          <span>{{ scope.row.residue }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="出库数量" align="center" prop="number">
+        <template #default="scope">
+          <el-input-number v-if="scope.row.type" v-model="scope.row.number" :controls="false" :min="0" :max="scope.row.residue" :precision="0" />
+          <span v-else>{{ scope.row.number }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="交接单位" align="center" prop="recipient">
+        <template #default="scope">
+          <el-input v-if="scope.row.type" style="width: 150px" v-model="scope.row.recipient" />
+          <span v-else>{{ scope.row.recipient }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="领用人" align="center" prop=" shipper">
+        <template #default="scope">
+          <el-input v-if="scope.row.type" style="width: 150px" v-model="scope.row.shipper" />
+          <span v-else>{{ scope.row.shipper }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作人" align="center" prop="operator">
+        <template #default="scope">
+          <el-input v-if="scope.row.type" style="width: 150px" v-model="scope.row.operator" />
+          <span v-else>{{ scope.row.operator }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="出库时间" align="center" prop="outPutTime" width="180" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleConfirm(scope.row)" v-if="scope.row.type"> 确认 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStoreHook } from '@/store/modules/user';
+import { addOutbound } from '@/api/materials/materialOutbound';
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const emit = defineEmits(['success']);
+const props = defineProps({
+  row: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const handleConfirm = async (row: any) => {
+  if (row.number == 0 || !row.number) {
+    ElMessage.error('请输入出库数量');
+    return;
+  }
+  if (!row.shipper) {
+    ElMessage.error('请输入领用人');
+    return;
+  }
+  if (!row.operator) {
+    ElMessage.error('请输入操作人');
+    return;
+  }
+  console.log(row);
+
+  const params = {
+    ...row,
+    materialsId: row.id,
+    projectId: currentProject.value?.id,
+    outPut: '1'
+  };
+  console.log(params);
+  const data = await addOutbound(params);
+  if (data.code === 200) {
+    ElMessage.success('出库成功');
+    emit('success');
+  }
+};
+</script>

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>

src/views/materials/materialsUseRecord/index.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="p-2">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="4">
+        <el-card shadow="never">
+          <el-tree style="max-width: 600px" :data="TreeData" :props="defaultProps" @node-click="handleNodeClick" />
+        </el-card>
+      </el-col>
+
+      <el-col :span="20">
         <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> </transition>
         <el-card shadow="never">
           <template #header>
@@ -77,8 +85,17 @@
               </template>
             </el-table-column>
           </el-table>
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
         </el-card>
+      </el-col>
+    </el-row>
+
     <!-- 添加或修改材料使用登记对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="materialsUseRecordFormRef" :model="form" :rules="rules" label-width="80px">
@@ -115,7 +132,7 @@ import { MaterialsUseRecordVO, MaterialsUseRecordQuery, MaterialsUseRecordForm }
 import { getCurrentInstance, ComponentInternalInstance, onMounted, ref, reactive, toRefs, computed, watch, WatchStopHandle } from 'vue';
 import { ElFormInstance, ElTable } from 'element-plus';
 import useUserStore from '@/store/modules/user';
-import { get } from 'lodash';
+import { getMaterialsList } from '@/api/materials/materialOutbound';
 
 // 类型定义补充
 interface DialogOption {
@@ -183,7 +200,8 @@ const data = reactive({
     projectId: currentProject.value?.id,
     outPut: 1,
     materialsName: undefined,
-    usePart: undefined
+    usePart: undefined,
+    materialsId: ''
   } as MaterialsUseRecordQuery & {
     outPut?: number;
     materialsName?: string;
@@ -199,6 +217,32 @@ const data = reactive({
 
 const { form, rules } = toRefs(data);
 const queryParams = ref<typeof data.queryParams>({ ...data.queryParams });
+const TreeData: any = ref([]);
+//获取材料列表
+const getMaterialsListData = async () => {
+  const res = await getMaterialsList({ projectId: currentProject.value?.id, pageNum: 1, pageSize: 999 });
+  if (res.code === 200) {
+    // 将数据转换为树形结构
+    TreeData.value = res.rows.map((item) => ({
+      ...item,
+      label: item.materialsName + '_' + item.createTime,
+      children: []
+    }));
+    queryParams.value.materialsId = TreeData.value[0].id;
+    getList();
+  }
+};
+
+const handleNodeClick = (data: any) => {
+  console.log(data);
+  queryParams.value.materialsId = data.id;
+  getList();
+};
+
+const defaultProps = {
+  children: 'children',
+  label: 'label'
+};
 
 // ------------------------------ 子列表状态工具函数 ------------------------------
 /** 获取或初始化指定父行的子列表状态 */
@@ -420,6 +464,7 @@ onUnmounted(() => {
 
 // 页面挂载时加载数据
 onMounted(() => {
-  getList();
+  // getList();
+  getMaterialsListData();
 });
 </script>