guangda/src/page/purchaseView/plan.vue

<template>
  <div>
    <!-- 页面主体内容 -->
    <div class="planAddContent" v-show="contentShow">
      <Card style="width:100%" :bordered="false" :dis-hover="true">
        <p slot="title">申购计划详情</p>
        <Row class="mainCont">
          <Col span="4" class-name="tables">计划单据号</Col>
          <Col span="4" class-name="tables">{{ form.jhdjh }}</Col>
          <Col span="4" class-name="tables">
            所属区域
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">{{ form.ssqy }}</Col>
          <Col span="4" class-name="tables">
            所属项目
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">{{ form.ssxm }}</Col>
          <Col span="4" class-name="tables">标题</Col>
          <Col span="4" class-name="tables">{{ form.bt }}</Col>
          <Col span="4" class-name="tables">参考总价（元）</Col>
          <Col span="4" class-name="tables">{{ form.totalPrice }}</Col>
          <Col span="4" class-name="tables">
            计划类型
            <span class="mustSpan">*</span>
          </Col>
          <Col
            span="4"
            class-name="tables"
          >{{ form.jhlx == "" ? "" : jhlxList.filter(a => a.value == form.jhlx)[0].label }}</Col>
          <Col span="4" class-name="tables">
            计划月份
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">{{ form.date }}</Col>
          <Col span="4" class-name="tables">分管采购员</Col>
          <Col span="4" class-name="tables">{{ form.fgcgy }}</Col>
          <Col span="4" class-name="tables">申请人</Col>
          <Col span="4" class-name="tables">
            <span>{{ form.sqr }}</span>
          </Col>
          <Col span="4" class-name="tables">审批状态</Col>
          <Col span="4" class-name="tables">
            <span v-if="form.spzt == '0'">未发起</span>
            <span v-if="form.spzt == '1'">审批中</span>
            <span v-if="form.spzt == '2'">审批通过</span>
            <span v-if="form.spzt == '3'">审批不通过</span>
            <span v-if="form.spzt == '4'">审批驳回</span>
          </Col>
          <Col span="4" class-name="tables"></Col>
          <Col span="4" class-name="tables"></Col>
          <Col span="4" class-name="tables"></Col>
          <Col span="4" class-name="tables"></Col>
        </Row>
        <Row class="uplCont" type="flex" justify="center" style="align-items: stretch">
          <Col span="4" class-name="upl">附件</Col>
          <Col span="20" class="upl" style="padding: 5px">
            <div v-for="(item, index) in form.filesList" :key="index">
              <a :href="item.filePath" :download="item.fileName" target="_blank">{{ item.fileName }}</a>
            </div>
            <p v-if="uploading" style="text-align: center">上传中...</p>
          </Col>
        </Row>
        <Row class="mainCont">
          <Col span="4" class-name="tables">说明</Col>
          <Col span="20" class-name="tables">{{ form.sm }}</Col>
        </Row>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </Card>
      <Card style="width:100%" :bordered="false" :dis-hover="true">
        <p slot="title">申购计划明细</p>
        <Table :columns="tableColumn" style="width: 100%" :data="tableData" :loading="tableLoading">
          <template slot-scope="{ row, index }" slot="amount">
            <div>{{ row.amount }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="storehouseId">{{ row.storehouseName }}</template>
          <template slot-scope="{ row, index }" slot="linkedPersonName">
            <span>{{ row.linkedPersonName }}</span>
          </template>
          <template slot-scope="{ row, index }" slot="billType">{{ row.billTypeName }}</template>
          <template slot-scope="{ row, index }" slot="referenceTotalPrice">
            <span>{{ row.amount * row.referencePrice }}</span>
          </template>
          <template slot-scope="{ row, index }" slot="arriveTime">{{ row.arriveTime }}</template>
          <!-- @on-change="((val, date) => tableDateChange(val, date ,index))" -->
          <template slot-scope="{ row, index }" slot="remark">{{ row.remark }}</template>
        </Table>
      </Card>
    </div>
  </div>
</template>

<script>
import {
  queryPurchaseApplyInfo4OA,
  getJobList,
  warehouseList,
  getLabelByCode4Purchase,
  queryPurchaseApplyInfo
} from "@/service/getData";
export default {
  data() {
    return {
      id: "",
      spinShow: false,
      contentShow: true,
      requestId: "",
      planType: "add",
      uploadHeaders: {
        token: localStorage.token,
        userId: localStorage.user_id
      },
      form: {
        status: "", //申购计划状态
        jhdjh: "", // 计划单据号
        bt: "", //标题
        spzt: 0, //审批状态
        date: "", //计划月份
        ssqy: "", //所属区域
        ssxm: "", //所属项目
        jhlx: "", //计划类型
        fgcgy: ",", //分管采购员
        totalPrice: 0, //总价
        sqr: localStorage.user_name, //申请人
        filesList: []
      },
      jhlxList: [
        { label: "计划性申购", value: 1 },
        { label: "临时申购", value: 2 }
      ],
      cgyList: [],
      djlxList: [],
      uploading: false,
      // 批量设置
      plszShow: false,
      plrkck: "",
      pldhsj: "",
      // table
      ckList: [],
      djList: [
        { label: "公区", value: 0 },
        { label: "内部", value: 1 }
      ],
      tableColumn: [
        {
          title: "物料编码",
          key: "code",
          tooltip: "true"
          // width: 100
        },
        {
          title: "物料分类",
          key: "firstClassName",
          tooltip: "true"
          // width: 100
        },
        {
          title: "物料名称",
          key: "materialName",
          tooltip: "true"
          // width: 100
        },
        {
          title: "规格型号",
          key: "specs",
          tooltip: "true"
          // width: 100
        },
        {
          title: "单位",
          key: "unit",
          tooltip: "true"
          // width: 100
        },
        {
          title: "库存量",
          key: "inventory",
          tooltip: "true"
          // width: 100
        },
        {
          title: "申购数量",
          slot: "amount",
          tooltip: "true"
          // width: 100
        },
        {
          title: "参考单价（元）",
          key: "referencePrice",
          tooltip: "true"
          // width: 120
        },
        {
          title: "参考总价（元）",
          slot: "referenceTotalPrice",
          tooltip: "true"
          // width: 120
        },
        {
          title: "入库仓库",
          slot: "storehouseId",
          tooltip: "true"
          // width: 100
        },
        {
          title: "对接人",
          slot: "linkedPersonName",
          tooltip: "true"
          // width: 100
        },
        {
          title: "单据类型",
          slot: "billType",
          tooltip: "true"
          // width: 100
        },
        {
          title: "计划到货时间",
          slot: "arriveTime",
          tooltip: "true"
          // width: 130
        },
        {
          title: "备注",
          slot: "remark",
          tooltip: "true"
          // width: 100
        }
      ],
      tableData: [],
      tableSelect: [],
      tableLoading: false
    };
  },
  created() {
    if (this.$route.query.param) {
      this.getSgjh();
    } else {
      this.getInfo();
    }
  },
  methods: {
    //表单上传
    getInfo() {
      queryPurchaseApplyInfo({
        id: this.$route.query.id
      }).then(res => {
        if (res.status == 200) {
          this.form.jhdjh = res.data.code;
          this.form.bt = res.data.title;
          this.form.ssqy = `${res.data.areaName}`;
          this.form.ssxm = `${res.data.projectName}`;
          this.form.jhlx = res.data.type;
          this.form.date = res.data.applyMonth;
          // this.form.fgcgy = res.data.purchaserName;
          this.form.sqr = res.data.applicantName;
          this.form.spzt = res.data.applyStatus;
          this.form.status = res.data.status;
          this.form.fgcgy = `${res.data.purchaserName}`;
          this.form.ylh = res.data.gpUnionpayNo;
          this.form.sf = res.data.gpProvince;
          this.form.yb = res.data.gpPostalCode;
          this.form.email = res.data.gpEmail;
          this.form.fax = res.data.gpFax;
          this.form.filesList = res.data.attachmentList;
          this.form.sm = res.data.remark;
          this.requestId = res.requestId;
          let getData = {
            areaId: res.data.areaId,
            projectId: res.data.projectId
          };
          let total = 0;
          for (let item in res.data.detailList) {
            total +=
              res.data.detailList[item].referencePrice *
              res.data.detailList[item].amount;
          }
          this.form.totalPrice = Number(total).toFixed(2);
          this.tableData = res.data.detailList;
        }
      });
    },
    beforeUpload() {},
    upFilesLoading() {
      this.uploading = true;
    },
    uploadFilesSuccess(response, file, fileList) {
      this.uploading = false;
      this.form.filesList.push({
        fileName: response.data.fileName,
        filePath: response.data.filePath,
        fileDetailType: ""
      });
    },
    plAdd(list) {
      for (let item in list) {
        if (
          this.tableData.filter(a => a.materialId == list[item].materialId)
            .length > 0
        ) {
        } else {
          this.tableData.push(list[item]);
        }
      }
    },
    //查询申购计划详情
    getSgjh(id) {
      this.spinShow = true;
      queryPurchaseApplyInfo4OA(this.$route.query.param).then(res => {
        this.spinShow = false;
        if (res.status == 200) {
          this.form.jhdjh = res.data.code;
          this.form.bt = res.data.title;
          this.form.ssqy = `${res.data.areaName}`;
          this.form.ssxm = `${res.data.projectName}`;
          this.form.jhlx = res.data.type;
          this.form.date = res.data.applyMonth;
          // this.form.fgcgy = res.data.purchaserName;
          this.form.sqr = res.data.applicantName;
          this.form.spzt = res.data.applyStatus;
          this.form.status = res.data.status;
          this.form.fgcgy = `${res.data.purchaserName}`;
          this.form.ylh = res.data.gpUnionpayNo;
          this.form.sf = res.data.gpProvince;
          this.form.yb = res.data.gpPostalCode;
          this.form.email = res.data.gpEmail;
          this.form.fax = res.data.gpFax;
          this.form.filesList = res.data.attachmentList;
          this.form.sm = res.data.remark;
          this.requestId = res.requestId;
          let getData = {
            areaId: res.data.areaId,
            projectId: res.data.projectId
          };
          let total = 0;
          for (let item in res.data.detailList) {
            total +=
              res.data.detailList[item].referencePrice *
              res.data.detailList[item].amount;
          }
          this.form.totalPrice = Number(total).toFixed(2);
          this.tableData = res.data.detailList;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mustSpan {
  color: red;
  margin-left: 2px;
}
button {
  min-width: 80px;
}
.uplCont {
  border-left: 1px solid #e4e4e4;
  .upl {
    flex: auto;
    min-height: 40px;
    border-right: 1px solid #e4e4e4;
    &:nth-child(1) {
      background: #f8f9fb;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .uplf {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
  }
}
.mainCont .tables {
  height: 50px;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
  &:nth-child(2n + 1) {
    background: #f8f9fb;
  }
}
.mainCont {
  border-left: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
}
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>