td_official/src/views/materials/materialOutbound/index.vue

<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>