ConsumSupplier-Platform/src/views/page/orderManage-sup/purOrderDelivery/index.vue

<template>
  <!-- 采购订单出库 -->
  <div style="display: flex">
    <el-card style="width: 18%; margin-right: 18px; border-radius: 6px">
      <el-tabs v-model="activeNametree" type="card" @tab-click="tabClick" stretch>
        <!-- <el-tab-pane label="按分类" name="grp"></el-tab-pane> -->
        <el-tab-pane label="按机构" name="org"></el-tab-pane>
      </el-tabs>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="spdId"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top: 10px"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>{{ node.label }}</div>
          <div class="redTit">{{ data.wcknum }}</div>
        </span>
      </el-tree>
    </el-card>
    <div class="right-common-box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待出库" name="first">
          <el-form :model="listQuery" ref="queryForm" :inline="true">
            <el-form-item label="采购单号" prop="id">
              <el-input v-model="listQuery.id" placeholder="请输入采购单号"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="branchName">
              <el-input
                v-model="listQuery.branchName"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="来源部门" prop="deptName">
              <el-input
                v-model="listQuery.deptName"
                placeholder="请输入来源部门"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购时间" prop="docmkDate">
              <el-date-picker
                v-model="listQuery.docmkDate"
                type="daterange"
                range-separator="至"
                :editable="false"
                value-format="yyyy-MM-dd"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 230px"
              />
            </el-form-item>
            <!-- <el-form-item label="当前状态" prop="stas">
                <el-select
                    v-model="listQuery.stas"
                    placeholder="请选择"
                    clearable
                >
                    <el-option
                        v-for="item in stasOptions"
                        :key="item.value"
                        :label="item.lable"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="getOutboundData('search')"
                >查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="list"
            fit
            stripe
            border
            height="500px"
          >
            <template slot="empty">
              <img src="@/assets/nopage.png" alt />
              <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column label="订单编号" prop="id" />
            <el-table-column label="订单种类" prop="detlCnt" />
            <el-table-column label="订单总数量" prop="qtySum" />
            <el-table-column label="剩余出库量" prop="delvCnt" />
            <el-table-column label="订单总金额" prop="purcAmt" width="100px" />
            <el-table-column label="客户名称" prop="branchName" />
            <el-table-column label="来源部门" prop="deptName" />
            <el-table-column label="采购类型" prop="purcType" width="100">
              <template #default="{ row }">
                <span v-if="row.purcType == '2'">{{ row.oprn }}</span>
                <span v-if="row.purcType == '1'">普通采购</span>
              </template>
            </el-table-column>
            <el-table-column label="采购时间" prop="docmkDate" width="140" />
            <el-table-column label="状态" prop="stas">
              <!-- <template #default="{ row }">
              <span v-if="row.stas == 'A'">未受理</span>
              <span v-if="row.stas == 'B'">未出库</span>
              <span v-if="row.stas == 'R'">被驳回</span>
              <span v-if="row.stas == 'C'">已出库</span>
              <span v-if="row.stas == 'D'">部分出库</span>
              <span v-if="row.stas == 'Y'">已入库</span>
              <span v-if="row.stas == 'P'">部分入库</span>
            </template> -->
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <yl-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getOutboundData"
          />
        </el-tab-pane>
        <el-tab-pane label="已出库" name="second">
          <el-form :model="listQueryC" ref="queryFormC" :inline="true">
            <el-form-item label="出库单号" prop="delvOrdId">
              <el-input
                v-model="listQueryC.delvOrdId"
                placeholder="请输入出库单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="关联采购单" prop="purcOrdId">
              <el-input
                v-model="listQueryC.purcOrdId"
                placeholder="请输入关联采购单"
              ></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="branchName">
              <el-input
                v-model="listQueryC.branchName"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="来源部门" prop="deptName">
              <el-input
                v-model="listQueryC.deptName"
                placeholder="请输入来源部门"
              ></el-input>
            </el-form-item>
            <el-form-item label="出库时间" prop="docmkDate">
              <el-date-picker
                v-model="listQueryC.docmkDate"
                type="daterange"
                range-separator="至"
                :editable="false"
                value-format="yyyy-MM-dd"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 230px"
              />
            </el-form-item>
            <!-- <el-form-item label="当前状态" prop="purcOrdStas">
                <el-select
                    v-model="listQuery.purcOrdStas"
                    placeholder="请选择"
                    clearable
                >
                    <el-option
                        v-for="item in stasOptions"
                        :key="item.value"
                        :label="item.lable"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="getOutboundDataC('search')"
                >查询
              </el-button>
              <el-button @click="resetC">重置</el-button>
            </el-form-item>
          </el-form>
          <el-table
            v-loading="listLoading"
            element-loading-text="加载中"
            :data="listC"
            fit
            stripe
            border
            height="500px"
          >
            <template slot="empty">
              <img src="@/assets/nopage.png" alt />
              <p>暂无数据</p>
            </template>
            <el-table-column fixed type="index" label="序号" width="60" />
            <el-table-column label="出库单号" prop="delvOrdId" />
            <el-table-column label="关联采购单" prop="purcOrdId" />
            <el-table-column label="采购品种数" prop="detlCnt" />
            <el-table-column label="采购总数量" prop="qtySum" />
            <el-table-column label="本次出库量" prop="bcckl" />
            <el-table-column label="客户验收数量" prop="shppCnt" width="100px" />
            <el-table-column label="剩余出库量" prop="toDelvCnt" width="100px" />
            <el-table-column label="客户名称" prop="branchName" />
            <el-table-column label="来源部门" prop="deptName" />
            <el-table-column label="采购类型" prop="purcType" width="100">
              <template #default="{ row }">
                <span v-if="row.purcType == '2'">{{ row.oprn }}</span>
                <span v-if="row.purcType == '1'">普通采购</span>
              </template>
            </el-table-column>
            <el-table-column label="出库员" prop="docmker" />
            <el-table-column label="出库时间" prop="docmkDate" width="140" />
            <el-table-column label="状态" prop="delvOrdStas" width="100">
              <template #default="{ row }">
                <span v-if="row.delvOrdStas == 'A'">未受理</span>
                <span v-if="row.delvOrdStas == 'B'">已受理</span>
                <span v-if="row.delvOrdStas == 'R'">被驳回</span>
                <span v-if="row.delvOrdStas == 'C'">已出库</span>
                <span v-if="row.delvOrdStas == 'D'">部分出库</span>
                <span v-if="row.delvOrdStas == 'Y'">已入库</span>
                <span v-if="row.delvOrdStas == 'P'">部分入库</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" @click="handleDetailC(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <yl-pagination
            v-show="totalC > 0"
            :total="totalC"
            :page.sync="listQueryC.current"
            :limit.sync="listQueryC.size"
            @pagination="getOutboundDataC"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import {
  getMcsOrdDck,
  getSplerMcsDelvOrdPage,
  selectSpdList,
} from "@/api/orderManage-sup/index";
export default {
  components: {
    ylPagination,
  },
  data() {
    return {
      activeNametree: "org",
      data: [],
      spdId: null,
      defaultProps: {
        children: "children",
        label: "spdName",
      },
      activeName: "first",
      listQuery: {
        current: 1,
        size: 10,
        id: "",
        branchName: "",
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [],
        stas: "",
        spdId: "",
      },
      listQueryC: {
        current: 1,
        size: 10,
        purcOrdId: "",
        branchName: "",
        docmkDate: "",
        delvOrdId: "",
        docmkDateEnd: "",
        branchName: "",
      },
      stasOptions: [
        // {value: 'A', lable: "未受理"},
        { value: "B", lable: "未出库" },
        // {value: 'R', lable: "被驳回"},
        { value: "C", lable: "已出库" },
        { value: "D", lable: "部分出库" },
        // {value: 'Y', lable: "已入库"},
        // {value: 'P', lable: "部分入库"}
      ],
      listLoading: false,
      list: [],
      listC: [],
      total: 0,
      totalC: 0,
      routespdId:"",
    };
  },
  mounted() {
    this.getData();
    if (this.$route.query.spdId && this.$route.query.activeName == "first") {
      this.listQuery.spdId = this.$route.query.spdId;
      getMcsOrdDck(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    }
    if (this.$route.query.spdId && this.$route.query.activeName == "second") {
      this.activeName = "second";
      this.listQueryC.spdId = this.$route.query.spdId;
      getSplerMcsDelvOrdPage(this.listQueryC)
        .then((res) => {
          this.listC = res.data.records;
          this.totalC = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    }
  },
  methods: {
    tabClick(tab) {
      if (tab.label == "按机构") {
        this.defaultProps.label = "spdName";
      }
      // else if(tab.label == "按分类"){
      //     // this.getData4();
      //     // this.defaultProps.label = 'orgGrpName'
      //     // this.listQuery.type = 'grp';
      // }
    },
    handleClick(tab) {
      console.log(tab.name, "name");
      if (tab.name == "first") {
        this.getOutboundData();
      } else {
        this.getOutboundDataC();
      }
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      selectSpdList()
        .then((res) => {
          this.listQuery.spdId = res.data[0].spdId;
          this.listQueryC.spdId = res.data[0].spdId;
          this.data = res.data;
          console.log(this.data, "dadad");
        })
        .catch((err) => {});
    },
    getOutboundData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.listQuery.spdId = this.spdId;
      this.listQuery.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQuery.docmkDateEnd = this.listQuery.docmkDate[1];
      getMcsOrdDck(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    // 点击获取耗材列表
    handleNodeClick(data) {
      console.log(data, "data");
      this.listLoading = true;
      this.listQuery.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQuery.docmkDateEnd = this.listQuery.docmkDate[1];
      this.spdId = data.spdId;
      this.listQuery.spdId = this.spdId;
      getMcsOrdDck(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
          console.log(res, "医院目录");
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.getOutboundData();
    },
    // 详情
    handleDetail(row) {
      if (this.spdId) {
        this.routespdId = this.spdId;
      } else {
        this.routespdId = this.$route.query.spdId;
      }
      this.$router.push({
        name: "deliveryDetail",
        query: {
          deptName: row.deptName,
          deptId: row.deptId,
          id: row.id,
          detlCnt: row.detlCnt,
          qtySum: row.qtySum,
          purcAmt: row.purcAmt,
          docmker: row.docmker,
          docmkDate: row.docmkDate,
          stas: row.stas,
          branchName: row.branchName,
          spdId: this.routespdId,
          activeName: this.activeName,
          oprn: row.oprn,
          oprtRoom: row.oprtRoom,
          oprtTime: row.oprtTime,
          atddr: row.atddr,
          purcType: row.purcType,
        },
      });
    },
    getOutboundDataC(type) {
      if (type == "search") {
        this.listQueryC.current = 1;
      }
      this.listLoading = true;
      this.listQueryC.spdId = this.spdId;
      this.listQueryC.docmkDateStart = this.listQueryC.docmkDate[0];
      this.listQueryC.docmkDateEnd = this.listQueryC.docmkDate[1];
      getSplerMcsDelvOrdPage(this.listQueryC)
        .then((res) => {
          this.listC = res.data.records;
          this.totalC = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    resetC() {
      this.$refs.queryFormC.resetFields();
      this.getOutboundDataC();
    },
    // 详情
    handleDetailC(row) {
      if (this.spdId) {
        this.routespdId = this.spdId;
      } else {
        this.routespdId = this.$route.query.spdId;
      }
      this.$router.push({
        name: "alreadyDetail",
        query: {
          delvOrdId: row.delvOrdId,
          purcOrdId: row.purcOrdId,
          detlCnt: row.detlCnt,
          docmker: row.docmker,
          deptName: row.deptName,
          docmkDate: row.docmkDate,
          delvOrdStas: row.delvOrdStas,
          branchName: row.branchName,
          qtySum: row.qtySum,
          spdId: this.routespdId,
          activeName: this.activeName,
          purcAmt: row.purcAmt,
          oprn: row.oprn,
          oprtRoom: row.oprtRoom,
          oprtTime: row.oprtTime,
          atddr: row.atddr,
          purcType: row.purcType,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.custom-tree-node ::v-deep .redTit {
  min-width: 30px;
  background-color: #f56c6c;
  min-height: 1px;
  border-radius: 10px;
  text-align: center;
  margin-left: 10px;
  padding: 1px;
  color: #fff;
}
</style>