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"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>{{ node.label }}</div>
          <div class="redTit">{{ data.wslnum }}</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" 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
            stripe
            border
            height="500px"
          >
            <template slot="empty">
              <img src="@/assets/nopage.png" alt />
              <p>暂无数据</p>
            </template>
            <el-table-column 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="docmkDate" width="140" />
            <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="stas">
              <template #default="{ row }">
                <span v-if="row.stas == 'A'">未受理</span>
                <span v-if="row.stas == 'B'">已受理</span>
                <span v-if="row.stas == 'C'">已退回</span>
                <span v-if="row.stas == 'D'">已关闭</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="listQueryC.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="getorderDataC('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 type="index" label="序号" width="60" />
            <el-table-column label="订单编号" prop="id" />
            <el-table-column label="订单种类" prop="detlCnt" />
            <el-table-column label="订单总数量" prop="qtySum" width="100" />
            <el-table-column label="出库数量" prop="delvCnt" />
            <el-table-column label="订单总金额" prop="purcAmt" width="100" />
            <el-table-column label="客户名称" prop="branchName" />
            <el-table-column label="来源部门" prop="deptName" />
            <el-table-column label="发起时间" prop="docmkDate" width="160" />
            <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="acper" />
            <el-table-column label="受理时间" prop="acpDate" width="160" />
            <el-table-column label="状态" prop="stas" width="100px">
              <template #default="{ row }">
                <span v-if="row.stas == 'A'">未受理</span>
                <span v-if="row.stas == 'B'">已受理</span>
                <span v-if="row.stas == 'C'">已退回</span>
                <span v-if="row.stas == 'D'">已关闭</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="getorderDataC"
          />
        </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;
        });
    }
    if (this.$route.query.msgRouteUni) {
      this.listQuery.spdId = this.$route.query.spdId;
      this.listQuery.id = this.$route.query.msgRouteUni;
      this.getorderData();
    }
  },
  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) {
      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.getorderData();
    },
    // 详情
    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,
          oprn: row.oprn,
          oprtRoom: row.oprtRoom,
          oprtTime: row.oprtTime,
          atddr: row.atddr,
          purcType: row.purcType
        }
      });
    },
    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.getorderDataC();
    },
    // 详情
    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,
          oprn: row.oprn,
          oprtRoom: row.oprtRoom,
          oprtTime: row.oprtTime,
          atddr: row.atddr,
          purcType: row.purcType
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .long .el-input__inner {
  width: 199px;
}
.right-common-box ::v-deep .el-table__fixed {
  height: 100% !important;
}

.right-common-box ::v-deep .el-table__fixed-right {
  height: 100% !important;
}
.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>