ConsumSupplier-Platform/src/views/page/orderManage-sup/purOrderAccept/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;"
      ></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" class="long">
              <el-input v-model="listQuery.id" placeholder="请输入采购单号"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="branchName" class="long">
              <el-input
                v-model="listQuery.branchName"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="来源部门" prop="deptName" class="long">
              <el-input
                v-model="listQuery.deptName"
                placeholder="请输入来源部门"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购时间" prop="docmkDate" class="long">
              <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>
              <el-button type="primary" @click="getorderData('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
            height="500px"
            stripe
            border
          >
            <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="purcAmt" />
            <el-table-column label="客户名称" prop="branchName" />
            <el-table-column label="来源部门" prop="deptName" />
            <!-- <el-table-column label="采购员" prop="docmker" /> -->
            <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">
              <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="getorderData"
          />
        </el-tab-pane>
        <el-tab-pane label="已确认" name="second">
          <el-form :model="listQueryC" ref="queryFormC" :inline="true">
            <el-form-item label="采购单号" prop="id"  class="long">
              <el-input v-model="listQueryC.id" placeholder="请输入采购单号"></el-input>
            </el-form-item>
            <el-form-item label="客户名称" prop="branchName"  class="long">
              <el-input
                v-model="listQueryC.branchName"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="来源部门" prop="deptName" class="long">
              <el-input
                v-model="listQuery.deptName"
                placeholder="请输入来源部门"
              ></el-input>
            </el-form-item>
            <el-form-item label="采购时间" prop="docmkDate"  class="long">
              <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>
              <el-button type="primary" @click="getDataC('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="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" />
            <el-table-column label="客户名称" prop="branchName" />
            <el-table-column label="来源部门" prop="deptName" />
            <el-table-column label="发起时间" prop="docmkDate" width="140" />
            <!-- <el-table-column label="受理人" prop="docmker" />
            <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="handleDetail1(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="getDataC"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import { getMcsOrdPageSpler, getMcsOrdPageYqrSpler,selectSpdList} from "@/api/orderManage-sup/index";
export default {
  components: {
    ylPagination,
  },
  data() {
    return {
      activeNametree:"org",
      activeName: "first",
      data:[],
      spdId:null,
      defaultProps: {
        children: "children",
        label: "spdName",
      },
      listQuery: {
        current: 1,
        size: 10,
        id: "",
        // deptName: "",
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [],
        stas: "",
        branchName: "",
        spdId:""
      },
      listQueryC: {
        current: 1,
        size: 10,
        id: "",
        deptName: "",
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [],
        stas: "",
        branchName: "",
        spdId:""
      },
      stasOptions: [
        { value: "A", lable: "未受理" },
        { value: "B", lable: "已受理" },
        { value: "R", lable: "被驳回" },
        { value: "C", lable: "已出库" },
        { value: "D", lable: "部分出库" },
        { value: "Y", lable: "已入库" },
        { value: "P", lable: "部分入库" },
      ],
      options: [],
      listLoading: false,
      list: [],
      listC: [],
      total: 0,
      totalC: 0,
    };
  },
  mounted() {
    this.getData();
    if (this.$route.query.spdId && this.$route.query.activeName =='first') {
      this.listQuery.spdId = this.$route.query.spdId;
      getMcsOrdPageSpler(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;
      getMcsOrdPageYqrSpler(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.getorderData();
      } else {
        this.getorderDataC();
      }
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      selectSpdList()
        .then((res) => {
          this.listQuery.spdId = res.data[0].spdId;
          this.data = res.data;
          console.log(this.data, "dadad");
        })
        .catch((err) => {
        });
    },
    getorderData(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.listQuery.docmkDateStart = this.listQuery.docmkDate[0];
      this.listQuery.docmkDateEnd = this.listQuery.docmkDate[1];
      getMcsOrdPageSpler(this.listQuery)
        .then((res) => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
      // getMcsOrdPageSpler().then(res =>{
      // this.options = res.data
      // })
    },
    // 点击获取耗材列表
    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;
      getMcsOrdPageSpler(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.getData();
    },
    // 详情
    handleDetail(row) {
      this.$router.push({
        name: "acceptDetail",
        query: {
          id: row.id,
          detlCnt: row.detlCnt,
          qtySum: row.qtySum,
          purcAmt: row.purcAmt,
          docmker: row.docmker,
          docmkDate: row.docmkDate,
          stas: row.stas,
          deptName: row.deptName,
          branchName: row.branchName,
          spdId:this.listQuery.spdId,
          activeName:this.activeName,
        },
      });
    },
    getorderDataC(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];
      getMcsOrdPageYqrSpler(this.listQueryC)
        .then((res) => {
          this.listC = res.data.records;
          this.totalC = res.data.total;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
      // getMcsOrdPageYqrSpler().then(res =>{
      // this.options = res.data
      // })
    },
    resetC() {
      this.$refs.queryFormC.resetFields();
      this.getDataC();
    },
    // 详情
    handleDetail1(row) {
      this.$router.push({
        name: "confirmDetail",
        query: {
          id: row.id,
          detlCnt: row.detlCnt,
          qtySum: row.qtySum,
          purcAmt: row.purcAmt,
          docmker: row.docmker,
          docmkDate: row.docmkDate,
          stas: row.stas,
          deptName: row.deptName,
          branchName: row.branchName,
          spdId:this.listQueryC.spdId,
          activeName:this.activeName,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .long  .el-input__inner {
  width: 199px;
}
</style>