guangda/src/page/purchase/purchaseOrder.vue

<template>
  <div>
    <Card style="width:100%" :bordered="false" :dis-hover="true" v-show="!addShow && !printShow">
      <p slot="title">采购订单列表</p>
      <div slot="extra">
        <Button @click="addShow = true">新增采购订单</Button>
        <Button @click="exportData">导出明细</Button>
        <!-- <Button @click="printShow = true">打印---测试</Button> -->
      </div>
      <Row :gutter="10" style="margin-bottom: 10px">
        <Col span="4">
          <Select clearable v-model="searchForm.ssqy" placeholder="所属区域" @on-change="ssqyChange">
            <Option
              v-for="item in ssqyList"
              :value="item.areaId"
              :key="item.areaId"
            >{{ item.areaName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.glxm" placeholder="关联项目" @on-change="glxmChange">
            <Option
              v-for="item in glxmList"
              :value="item.projectId"
              :key="item.projectId"
            >{{ item.projectName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Input v-model="searchForm.cgr" placeholder="采购人" />
        </Col>
        <Col span="4">
          <DatePicker
            format="yyyy-MM-dd"
            :value="searchForm.xdsj"
            @on-change="searchForm.xdsj=$event"
            type="daterange"
            placeholder="下单时间"
          ></DatePicker>
        </Col>
        <Col span="4">
          <DatePicker
            format="yyyy-MM-dd"
            :value="searchForm.jhsj"
            @on-change="searchForm.jhsj=$event"
            type="date"
            placeholder="交货时间"
          ></DatePicker>
        </Col>
      </Row>
      <Row :gutter="10" style="margin-bottom: 10px">
        <Col span="4">
          <Input v-model="searchForm.shr" placeholder="收货人" />
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.gys" filterable placeholder="供应商">
            <Option v-for="item in gysList" :value="item.gpId" :key="item.gpId">{{ item.gpName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.spzt" placeholder="审批状态">
            <Option v-for="item in spztList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Select clearable v-model="searchForm.ddzt" placeholder="订单状态">
            <Option v-for="item in ddztList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <Input v-model="searchForm.title" placeholder="订购编号/标题/申购单号/物料名称" />
        </Col>
        <Col span="4">
          <Button type="primary" style="width: 80px" @click="getTableData">查询</Button>
        </Col>
      </Row>
      <Table
        :columns="tableColumn"
        style="width: 100%"
        :data="tableData"
        :height="resizeHeight - 65"
        :loading="tableLoading"
        @on-select="tableOnSelect"
      >
        <template slot-scope="{ row, index }" slot="approvalState">
          <div>
            <span v-if="row.approvalState == '1'">未提交</span>
            <span v-if="row.approvalState == '2'">审核中</span>
            <span v-if="row.approvalState == '3'">审核通过</span>
            <span v-if="row.approvalState == '4'">审核拒绝</span>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="orderState">
          <div>
            <span v-if="row.orderState == '1'">未下单</span>
            <span v-if="row.orderState == '2'">待下单</span>
            <span v-if="row.orderState == '3'">已下单</span>
            <span v-if="row.orderState == '4'">入库中</span>
            <span v-if="row.orderState == '5'">已入库</span>
            <span v-if="row.orderState == '6'">已取消</span>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <div>
            <a href="javascript:;" @click="editRow(row)">编辑</a>
            <a href="javascript:;" v-if="row.orderState == '1'" @click="deleteRow(row)">删除</a>
            <a
              href="javascript:;"
              v-if="row.orderState != '6' || row.approvalState != '4'"
              @click="printRow(row)"
            >打印</a>
            <a href="javascript:;" @click="cgddxd(row.orderId)" v-if="row.orderState == '2'">下单</a>
            <a href="javascript:;" @click="cgddqx(row.orderId)" v-if="row.orderState == '2'">取消订单</a>
          </div>
        </template>
      </Table>
      <Page align="right" :total="pageTotal" @on-change="pageChange" show-total />
    </Card>
    <orderAdd
      ref="add"
      :glqyList="ssqyList"
      :gysList="gysList"
      @return="() => {addShow = false; getTableData()}"
      v-show="addShow"
    />
    <orderPrint ref="print" @return="() => {printShow = false; getTableData()}" v-show="printShow" />
  </div>
</template>

<script>
import {
  getPurchaseOrder,
  deletePurchaseOrder,
  findPurchaseOrder,
  selectGoodProviderSelectionList,
  exportPurchaseOrder,
  getAreaList,
  getProjectList,
  editPurchaseOrderState,
  submitPurchaseOrder
} from "@/service/getData";
import orderAdd from "./components/order/orderAdd";
import orderPrint from "./components/order/orderPrint";
export default {
  components: {
    orderAdd,
    orderPrint
  },
  data() {
    return {
      addShow: false,
      printShow: false,
      //  自适应尺寸↓
      resizeHeight: 100,
      resizeWidth: 100,
      handleWidth: 100,
      //   查询参数
      searchForm: {
        ssqy: [], //所属区域
        glxm: [], //关联项目
        glcgjh: "", //关联采购计划
        cgr: "", //采购人
        xdsj: [], //下单时间
        jhsj: "", //交货时间
        shr: "", //收货人
        gys: "", //供应商
        spzt: "", //审批状态
        ddzt: "", //订单状态
        title: "" //订单编号或标题
      },
      ssqyList: [],
      glxmList: [],
      glcgjhList: [],
      cgrList: [],
      shrList: [],
      gysList: [],
      spztList: [
        { value: 1, label: "未提交" },
        { value: 2, label: "审核中" },
        { value: 3, label: "审核通过" },
        { value: 4, label: "审核拒绝" }
      ],
      ddztList: [
        { value: 1, label: "未下单" },
        { value: 2, label: "待下单" },
        { value: 3, label: "已下单" },
        { value: 4, label: "入库中" },
        { value: 5, label: "已入库" },
        { value: 6, label: "已取消" }
      ],
      //   表格参数
      tableLoading: false,
      pageTotal: 0,
      pageNum: 1,
      tableColumn: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },

        {
          title: "订购编号",
          key: "orderCode",
          tooltip: "true"
        },
        {
          title: "标题",
          key: "title",
          tooltip: "true"
        },
        {
          title: "总价（元）",
          key: "totalPrice",
          tooltip: "true"
        },
        {
          title: "申请人",
          key: "applicantName",
          tooltip: "true"
        },
        {
          title: "分管采购员",
          key: "purchaserName",
          tooltip: "true"
        },
        {
          title: "申请时间",
          key: "applicantTime",
          tooltip: "true"
        },
        {
          title: "所属区域",
          key: "areaName",
          tooltip: "true"
        },
        {
          title: "关联项目",
          key: "projectName",
          tooltip: "true"
        },
        {
          title: "审批状态",
          slot: "approvalState",
          tooltip: "true"
        },
        {
          title: "状态",
          slot: "orderState",
          tooltip: "true"
        },
        {
          title: "操作",
          slot: "action",
          width: 180
        }
      ],
      tableData: []
    };
  },
  created() {
    this.getTableData();
    getAreaList(localStorage.user_id).then(res => {
      this.ssqyList = res.items;
    });
    selectGoodProviderSelectionList().then(res => {
      this.gysList = res.data;
    });
  },
  methods: {
    resizePage() {
      this.resizeHeight = window.innerHeight - 282;
      this.resizeWidth = window.innerWidth;
      // this.handleWidth = this.$refs.handleHolder.offsetWidth;
    },
    ssqyChange(val) {
      let postData = {
        areaId: this.searchForm.ssqy,
        userId: localStorage.user_id
      };
      getProjectList(postData).then(res => {
        this.searchForm.glxm = "";
        this.glxmList = res.items;
      });
    },
    glxmChange(val) {},
    pageChange(val) {
      this.pageNum = val;
    },
    exportData() {
      let postData = {
        areaIds: `${this.searchForm.ssqy}`,
        projectIds: `${this.searchForm.glxm}`,
        purchaserId: this.searchForm.cgr,
        startTime: this.searchForm.xdsj[0],
        endTime: this.searchForm.xdsj[1],
        receivedName: this.searchForm.shr,
        gpId: this.searchForm.gys,
        approvalState: this.searchForm.spzt,
        orderState: this.searchForm.ddzt,
        queryText: this.searchForm.title
      };
      exportPurchaseOrder(postData);
    },
    //列表方法
    getTableData() {
      let postData = {
        page: this.pageNum,
        pageSize: 10,
        areaIds: `${this.searchForm.ssqy}`,
        projectIds: `${this.searchForm.glxm}`,
        purchaserId: this.searchForm.cgr,
        startTime: this.searchForm.xdsj[0],
        endTime: this.searchForm.xdsj[1],
        receivedName: this.searchForm.shr,
        gpId: this.searchForm.gys,
        approvalState: this.searchForm.spzt,
        orderState: this.searchForm.ddzt,
        queryText: this.searchForm.title
      };
      this.tableLoading = true;
      getPurchaseOrder(postData).then(res => {
        this.tableLoading = false;
        if (res.status == 200) {
          this.tableData = res.data.records;
          this.pageTotal = res.data.total;
        } else {
          this.$Message.error("获取采购订单列表失败。");
        }
      });
    },
    editRow(row) {
      this.addShow = true;
      this.$refs.add.getCgddXq(row.orderId);
    },
    submitRow(id) {
      this.$Modal.confirm({
        title: "提交",
        content: "是否确定提交该采购订单？",
        okText: "确定",
        onOk: () => {
          let postData = {
            orderId: id
          };
          submitPurchaseOrder(postData).then(res => {
            if (res.status == 200) {
              this.$Message.success("提交成功！");
              this.getTableData();
            } else {
              this.$Message.error(res.message);
            }
          });
        }
      });
    },
    cgddxd(id) {
      this.$Modal.confirm({
        title: "下单",
        content: "是否确定下单？",
        okText: "确定",
        onOk: () => {
          let str = `?orderId=${id}&state=3`;
          editPurchaseOrderState(str).then(res => {
            if ((res.status = 200)) {
              this.$Message.success("下单成功！");
              this.getTableData();
            }
          });
        }
      });
    },
    cgddqx(id) {
      this.$Modal.confirm({
        title: "取消订单",
        content: "是否确定取消该订单？",
        okText: "确定",
        onOk: () => {
          let str = `?orderId=${id}&state=6`;
          editPurchaseOrderState(str).then(res => {
            if ((res.status = 200)) {
              this.$Message.success("取消订单成功！");
              this.getTableData();
            }
          });
        }
      });
    },
    deleteRow(row) {
      this.$Modal.confirm({
        title: "删除",
        content: "是否确定删除该采购订单？",
        okText: "确定",
        onOk: () => {
          deletePurchaseOrder(row.orderId).then(res => {
            if ((res.status = 200)) {
              this.$Message.success("删除成功！");
              this.getTableData();
            }
          });
        }
      });
    },
    printRow(row) {
      this.printShow = true;
      this.$refs.print.getData(row.orderId);
    },
    tableOnSelect(selection, row) {}
  },
  mounted: function() {
    //  监听浏览器页面尺寸
    window.addEventListener("resize", this.resizePage);
    this.resizePage();
  }
};
</script>

<style lang="scss" scoped>
ivu-card-head-inner,
.ivu-card-head p {
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #17233d;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}
</style>