guangda/src/page/purchase/components/balance/balanceMxAdd.vue

<template>
  <div>
    <Card style="width:100%" :bordered="false" :dis-hover="true">
      <p slot="title">新增结算明细</p>
      <div slot="extra">
        <Button @click="$emit('return')">返回</Button>
      </div>
      <Row :gutter="10" style="margin-bottom: 10px">
        <Col span="4">
          <Select v-model="addForm.ssxm" placeholder="项目名称" style="width: 95%">
            <Option
              disabled
              v-for="item in ssxmList"
              :value="item.areaId"
              :key="item.areaId"
            >{{ item.areaName }}</Option>
          </Select>
        </Col>
        <Col span="4">
          <DatePicker
            format="yyyy-MM-dd"
            :value="addForm.xdsj"
            @on-change="addForm.xdsj=$event"
            type="daterange"
            placeholder="下单时间"
          ></DatePicker>
        </Col>
        <Col span="4">
          <DatePicker
            format="yyyy-MM-dd"
            :value="addForm.rksj"
            @on-change="addForm.rksj=$event"
            type="daterange"
            placeholder="入库时间"
          ></DatePicker>
        </Col>
        <Col span="4">
          <Input v-model="addForm.rkd" placeholder="入库单" style="width: 95%" />
        </Col>
        <Col span="8">
          <Button type="primary" style="width: 80px" @click="getTableData">查询</Button>
          <Button type="primary" style="width: 80px" @click="addMx">添加</Button>
        </Col>
      </Row>
      <Table
        :columns="tableColumn"
        style="width: 100%"
        :data="tableData"
        :loading="tableLoading"
        @on-select="tableOnSelect"
        @on-select-cancel="tableOnCancel"
        @on-select-all="tableOnSelect"
        @on-select-all-cancel="tableOnCancel"
      >
        <template slot-scope="{ row, index }" slot="action">
          <div>
            <a href="javascript:;">编辑</a>
            <a href="javascript:;">复制</a>
            <a href="javascript:;">删除</a>
            <a href="javascript:;">打印</a>
          </div>
        </template>
      </Table>
    </Card>
  </div>
</template>

<script>
import { hajwySettlementList } from "@/service/getData";
export default {
  props: ["ssxmList"],
  data() {
    return {
      gysId: "",
      xmId: "",
      //新增结算明细表单
      addForm: {
        ssxm: "", //项目名称
        xdsj: ["", ""], //下单时间
        rksj: ["", ""], //入库时间
        rkd: "" //入库单
      },
      //表格查询内容
      searchForm: {
        yjfl: "", //一级分类
        ejfl: "", // 二级分类
        wlmc: "" //物料编码或名称
      },
      yjflList: [
        { label: "1", value: "1" },
        { label: "2", value: "2" },
        { label: "3", value: "3" }
      ],
      ejflList: [
        { label: "1", value: "1" },
        { label: "2", value: "2" },
        { label: "3", value: "3" }
      ],
      jldwList: [],
      wllxList: [],
      //   表格参数
      tableLoading: false,
      tableColumn: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "入库单",
          key: "warehouseEntry",
          tooltip: "true"
        },
        {
          title: "物料名称",
          key: "sgNames",
          tooltip: "true"
        },
        {
          title: "总价（元）",
          key: "totalPrice",
          tooltip: "true"
        },
        {
          title: "采购人",
          key: "purchaserName",
          tooltip: "true"
        },
        {
          title: "采购人联系方式",
          key: "purchaserTel",
          tooltip: "true"
        },
        {
          title: "下单时间",
          key: "orderTime",
          tooltip: "true"
        },
        {
          title: "入库时间",
          key: "storehouseTime",
          tooltip: "true"
        },
        {
          title: "入库仓库",
          key: "storehouseName",
          tooltip: "true"
        },
        {
          title: "仓管员",
          key: "warehouseKeeper",
          tooltip: "true"
        }
      ],
      tableData: [],
      tableSelect: []
    };
  },
  methods: {
    //列表方法
    getTableData() {
      let postData = {
        // projectId: this.addForm.ssxm,
        projectId: 10,
        orderTimeStart: this.addForm.xdsj[0],
        orderTimeEnd: this.addForm.xdsj[1],
        storehouseTimeStart: this.addForm.rksj[0],
        storehouseTimeEnd: this.addForm.rksj[1],
        warehouseEntry: this.addForm.rkd,
        supplierId: this.gysId
      };
      let postStr = "";
      for (let item in postData) {
        if (postData[item] == "") {
        } else {
          postStr += `${item}=${postData[item]}&`;
        }
      }
      postStr = postStr.replace(/\&$/, "");
      this.tableLoading = true;
      hajwySettlementList(postStr).then(res => {
        this.tableLoading = false;
        if (res.status == 200) {
          this.tableData = res.data;
        }
      });
    },
    tableOnSelect(selection, row) {
      this.tableSelect = selection;
    },
    tableOnCancel(selection, row) {
      this.tableSelect = selection;
    },
    //添加明细
    addMx() {
      this.$emit("addMx", this.tableSelect);
      this.$emit("return");
    }
  }
};
</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;
}
.mainCont .tables {
  height: 50px;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  text-align: center;
  &:nth-child(2n + 1) {
    background: #f8f9fb;
  }
}
.mainCont {
  border-left: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
}
</style>