ConsumSupplier-Platform/src/views/page/consumCataManage-sup/purOrderAccept/index.vue

<template>
  <div style="display: flex; position: relative">
    <el-card style="width: 18%; margin-right: 18px; border-radius: 6px">
      <el-tree
        :data="dataTree"
        :props="defaultProps"
        node-key="hospId"
        :current-node-key="currentNodeKey"
        ref="tree1"
        highlight-current="true"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top: 10px"
        v-loading="dataTreeloading"
      >
        <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="common-box" style="width: 82%">
      <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="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="orgId">
          <el-cascader
            v-model="listQuery.orgId"
            :options="options"
            :show-all-levels="false"
            :props="{
              expandTrigger: 'hover',
              value: 'orgId',
              label: 'orgName',
              children: 'child',
              checkStrictly: true,
              emitPath: false
            }"
            clearable
            @change="handleChange"
          >
          </el-cascader>
        </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="getData('search')">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        height="500"
        fit
        stripe
        border
      >
        <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="planType" />
        <el-table-column label="品规数" prop="detlCnt" />
        <el-table-column label="金额" prop="purcAmt" />
        <el-table-column label="采购方" prop="orgName" />
        <!-- <el-table-column label="制单人" prop="docmker" /> -->
        <el-table-column label="制单时间" prop="docmkDate" />
        <el-table-column label="当前状态" prop="stas">
          <template #default="{ row }">
            <el-tag v-if="row.stas == 'A'" type="info">未受理</el-tag>
            <el-tag v-if="row.stas == 'B'" type="success">已受理</el-tag>
            <el-tag v-if="row.stas == 'R'" type="danger">被驳回</el-tag>
            <el-tag v-if="row.stas == 'C'" type="success">已出库</el-tag>
            <el-tag v-if="row.stas == 'D'">部分出库</el-tag>
            <el-tag v-if="row.stas == 'Y'" type="success">已入库</el-tag>
            <el-tag v-if="row.stas == 'P'">部分入库</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="部门名称"
          prop="deptName"
          v-if="hospIdWrong == '3'"
        />
        <el-table-column
          label="采购方上级"
          prop="prntOrgName"
          v-if="hospIdWrong == '4'"
        />
        <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="getData"
      />
    </div>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
// import { deleteEmptyGroup } from "@/utils/utils";
// import {
//   getOrdPageSpler,
//   getALLOrgTree,
//   QueryHospList,
// } from "@/api/orderManage-sup/index";
export default {
  components: {
    ylPagination
  },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 5,
        id: "",
        hospId: "",
        docmkDateStart: "",
        docmkDateEnd: "",
        docmkDate: [],
        stas: "A",
        orgId: ""
      },
      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: [],
      total: 0,
      dataTree: "",
      activeName: "org",
      hospId: null,
      currentNodeKey: "",
      defaultProps: {
        children: "children",
        label: "hospName"
      },
      // itemsPerPage:5
      hospIdWrong: null, //用于判断只有万荣要的部门名称
      dataTreeloading: false
    };
  },
  created() {
    if (this.$route.params.hospId) {
      this.listQuery.current = this.$route.params.current;
      this.handleNodeClick(this.$route.params.hospId);
    }
    if (localStorage.sizeaccept) {
      this.listQuery.size = Number(localStorage.sizeaccept);
    }
  },
  mounted() {
    this.dataTreeloading = true;
    QueryHospList()
      .then(res => {
        this.listQuery.hospId = res.data[0].hospId;
        this.dataTree = res.data;
        this.dataTreeloading = false;
        this.$nextTick(() => {
          this.$refs.tree1.setCurrentKey(this.currentNodeKey);
        });
      })
      .catch(() => {
        this.dataTreeloading = false;
      });
  },
  methods: {
    tabClick(tab) {
      if (tab.label == "按机构") {
        QueryHospList().then(res => {
          console.log(res, "shu");
          this.dataTree = res.data;
        });
        this.defaultProps.label = "hospName";
      } else if (tab.label == "按分类") {
        this.dataTree = [];
        // this.defaultProps.label = 'orgGrpName'
        // this.listQuery.type = 'grp';
      }
    },
    getData(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];
      // this.listQuery.hospId = this.hospId;

      getOrdPageSpler(this.listQuery)
        .then(res => {
          if (res.success == true) {
            this.list = res.data.records;
            this.total = res.data.total;
            this.listLoading = false;
            localStorage.setItem(
              "sizeaccept",
              JSON.stringify(this.listQuery.size)
            );
          }
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 点击获取医院药品列表
    handleNodeClick(data) {
      this.hospIdWrong = data.hospId;
      this.listQuery.spdId = data.spdId;
      this.listLoading = true;
      if (data.hospId) {
        this.listQuery.hospId = data.hospId;
        this.hospId = data.hospId;
        this.currentNodeKey = data.hospId;
        // this.$store.commit("user/SET_HOSPID", data.hospId);
      } else {
        this.listQuery.hospId = data;
        this.currentNodeKey = data;
        // this.$store.commit("user/SET_HOSPID", data);
      }
      getOrdPageSpler(this.listQuery)
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
      getALLOrgTree().then(res => {
        this.options = res.data;
        deleteEmptyGroup(this.options);
      });
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.getData();
    },
    // 详情
    handleDetail(row) {
      this.$router.push({
        name: "acceptDetail",
        query: {
          id: row.id,
          detlCnt: row.detlCnt,
          orgName: row.orgName,
          docmker: row.docmker,
          docmkDate: row.docmkDate,
          stas: row.stas,
          docmkerConinfo: row.docmkerConinfo,
          hospId: this.currentNodeKey,
          current: this.listQuery.current,
          ifCustomer: row.ifCustomer,
          spdId: this.listQuery.spdId,
          prntOrgName: row.prntOrgName
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 6px;
}
::v-deep .el-tabs__nav {
  width: 99%;
}
::v-deep .el-tabs__item {
  width: 49.5%;
}
::v-deep .el-badge__content.is-fixed {
  top: 8px;
  right: 22px;
}
.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>