report-vue/src/views/InformationAudit/outWarehouseAudit/index.vue

<!-- 出库信息审核 -->
<template>
  <basic-container>
    <el-form :model="formData" label-width="100px" class="whole_form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="出库类型">
            <el-select v-model="formData.outboundType" class="m-2" placeholder="请选择" clearable style="width: 280px">
              <el-option v-for="item in cklxOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物资名称">
            <el-input v-model="formData.materialNameVo" clearable placeholder="请输入" style="width: 280px" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="当前审批节点">
            <el-select v-model="formData.status" class="m-2" placeholder="请选择" clearable style="width: 280px">
              <el-option v-for="(item, index) in dqspjdOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="审批节点">
            <el-select v-model="formData.spjd" class="m-2" placeholder="请选择" clearable style="width: 280px">
              <el-option v-for="item in spjdOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />
      <el-table-column prop="warehouse" label="库点简称" header-align="center" align="center" />
      <el-table-column prop="outboundType" label="出库类型" header-align="center" align="center">
        <template #default="scope">
          {{ cklxObject[scope.row.outboundType] }}
        </template>
      </el-table-column>
      <el-table-column prop="materialGroup" label="物资大类" header-align="center" align="center" />
      <el-table-column prop="materialType" label="物资类别" header-align="center" align="center" />
      <el-table-column prop="materialName" label="物资名称" header-align="center" align="center" />
      <el-table-column prop="quantity" label="数量" header-align="center" align="center" />
      <el-table-column prop="calledProvince" label="调用省份" header-align="center" align="center">
        <template #default="scope">
          {{ dysfObject[scope.row.calledProvince] }}
        </template>
      </el-table-column>
      <el-table-column prop="outboundTime" label="出库日期" header-align="center" align="center" />
      <el-table-column prop="status" label="当前审批节点" header-align="center" align="center">
        <template #default="scope">
          {{ spjdObject[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" width="160">
        <template #default="scope">
          <el-button size="" type="primary" style="backgroundcolor: #949aef" @click="handleShow(scope.row)"
            >查看</el-button
          >
          <el-button
            size=""
            v-if="
              (deptId == '9' && scope.row.status == '3') ||
              (deptId == '10' && (scope.row.status == '2' || scope.row.status == '6'))
            "
            type="warning"
            style="backgroundcolor: #dbc262"
            @click="handleProcess(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="page.total > 0"
      v-model:page="page.currentPage"
      v-model:limit="page.pageSize"
      :total="page.total"
      layout="->,total, sizes, prev, pager, next, jumper"
      @pagination="getList"
    />
  </basic-container>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from "vue";
import { getInAuditList } from "@/api/inAndOut/outAudit/index";
import { getDictItemList } from "@/api/admin/index";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const data = reactive({
  tableData: [],
  cklxOptions: [],
  cklxObject: {}, //出库类型
  dysfObject: {}, //调用省份
  spjdObject: {}, //审批节点
  dqspjdOptions: [],
  spjdOptions: [],
  deptId: ""
});
let page = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
let formData = reactive({
  outboundType: "",
  materialNameVo: "",
  status: ""
  // spjd: ""
});

let { tableData, cklxOptions, cklxObject, dqspjdOptions, spjdOptions, dysfObject, spjdObject, deptId } = toRefs(data);

// 获取列表
const getList = () => {
  const data = reactive({
    size: page.pageSize,
    current: page.currentPage,
    params: { ...formData }
  });
  getInAuditList(data).then((res: any) => {
    console.log(res);
    if (res.code === 0) {
      tableData.value = res.data.records;
      page.total = res.data.total;
    }
  });
};
// 字典-出库类型
const getOutboundTypeList = () => {
  const data = reactive({
    size: 100,
    current: 1,
    dictId: "214124"
  });
  getDictItemList(data).then((res: any) => {
    if (res.code === 0) {
      cklxOptions.value = res.data.records;
      cklxObject.value = res.data.records.reduce((acc: any, item: any) => {
        acc[item.value] = item.label;
        return acc;
      }, {});
    }
  });
};
// 字典-审批节点
const getStatusList = () => {
  const data = reactive({
    size: 100,
    current: 1,
    dictId: "423059273"
  });
  getDictItemList(data).then((res: any) => {
    if (res.code === 0) {
      dqspjdOptions.value = res.data.records;
      spjdObject.value = res.data.records.reduce((acc: any, item: any) => {
        acc[item.value] = item.label;
        return acc;
      }, {});
    }
  });
};
// 字典-调用省份
const getProvinceList = () => {
  const data = reactive({
    size: 100,
    current: 1,
    dictId: "1763408141744652289"
  });
  getDictItemList(data).then((res: any) => {
    if (res.code === 0) {
      dysfObject.value = res.data.records.reduce((acc: any, item: any) => {
        acc[item.value] = item.label;
        return acc;
      }, {});
    }
  });
};
// 查询
const handleSearch = () => {
  getList();
};
// 重置
const handleReSearch = () => {
  page = {
    currentPage: 1,
    pageSize: 10,
    total: 0
  };
  formData = {
    outboundType: "",
    materialNameVo: "",
    status: ""
    // spjd: "",
  };
  getList();
};
// 审核
const handleProcess = (row: any) => {
  router.push({
    name: "outWarehouseAuditDetail",
    query: {
      id: row.outboundId,
      type: "audit"
    }
  });
};
// 查看
const handleShow = (row: any) => {
  router.push({
    name: "outWarehouseAuditDetail",
    query: {
      id: row.outboundId,
      type: "show"
    }
  });
};

getOutboundTypeList();
getStatusList();
getProvinceList();
onMounted(() => {
  getList();
  let deptObj: any = sessionStorage.getItem("userInfo");
  deptId = deptObj ? JSON.parse(deptObj).deptId : "";
});
</script>

<style lang="scss" scoped></style>