guangda/src/page/purchase/components/order/orderAdd.vue

<template>
  <div>
    <!-- 页面主体内容 -->
    <div class="planAddContent" v-show="contentShow && !printShow">
      <Card style="width:100%" :bordered="false" :dis-hover="true">
        <p slot="title">采购订单详情</p>
        <div slot="extra">
          <Button v-if="form.spzt != '1'" @click="toSpjl">查看审批记录</Button>
          <Button @click="submitCgdd" v-if="orderType == 'edit' && form.spzt == '1'">提交</Button>
          <Button @click="addCgdd" v-if="form.spzt == '1'">保存</Button>
          <Button
            href="javascript:;"
            v-if="form.ddzt != '6' && form.spzt != '4'"
            @click="printRow()"
          >打印</Button>
          <Button @click="cancel">返回</Button>
        </div>
        <Row class="mainCont">
          <Col span="4" class-name="tables">订购编号</Col>
          <Col span="4" class-name="tables">
            <span style="color: gray" v-if="orderType == 'add'">系统自动生成，不可编辑</span>
            <span v-else>{{ form.dgbh }}</span>
          </Col>
          <Col span="4" class-name="tables">标题</Col>
          <Col span="4" class-name="tables">
            <span style="color: gray" v-if="orderType == 'add'">系统自动生成，不可编辑</span>
            <span v-else>{{ form.bt }}</span>
          </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">
            <Select
              clearable
              v-model="form.glqy"
              style="width: 95%"
              v-if="orderType == 'add'"
              @on-change="ssqyChange"
            >
              <Option
                v-for="item in glqyList"
                :value="item.areaId + ',' + item.areaName"
                :key="item.areaId"
                :disabled="form.spzt == '2' || form.spzt == '3'"
              >{{ item.areaName }}</Option>
            </Select>
            <span v-else>{{ form.glqy.split(',')[1] }}</span>
          </Col>
          <Col span="4" class-name="tables">
            关联项目
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <Select clearable v-model="form.glxm" style="width: 95%" v-if="orderType == 'add'">
              <Option
                v-for="item in glxmList"
                :value="item.projectId + ',' + item.projectName"
                :key="item.projectId"
                :disabled="form.spzt == '2' || form.spzt == '3'"
              >{{ item.projectName }}</Option>
            </Select>
            <span v-else>{{ form.glxm.split(',')[1] }}</span>
          </Col>
          <!-- <Col span="4" class-name="tables">
            单据类型
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <Select v-model="form.djlx" style="width: 95%" :disabled="form.spzt != '1'">
              <Option
                v-for="item in djlxList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>-->

          <Col span="4" class-name="tables">采购人</Col>
          <Col span="4" class-name="tables">{{ form.cgr }}</Col>
          <Col span="4" class-name="tables">
            采购人联系方式
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <Input
              v-model="form.cgrlxfs"
              :disabled="form.spzt != '1'"
              placeholder="请输入"
              style="width: 95%"
            />
          </Col>
          <Col span="4" class-name="tables">
            下单日期
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <DatePicker
              style="width: 95%"
              format="yyyy-MM-dd HH:mm:ss"
              :value="form.xdrq"
              @on-change="form.xdrq=$event"
              type="datetime"
              :options="xdrqOption"
              placeholder="请选择"
              :disabled="form.spzt != '1'"
            ></DatePicker>
          </Col>
          <Col span="4" class-name="tables">
            交货时间
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <DatePicker
              :disabled="form.xdrq == '' || form.spzt != '1'"
              style="width: 95%"
              format="yyyy-MM-dd"
              :value="form.jhsj"
              :options="jhsjOptions"
              @on-change="form.jhsj=$event"
              type="date"
              placeholder="请选择"
            ></DatePicker>
          </Col>
          <Col span="4" class-name="tables">交货地点</Col>
          <Col span="4" class-name="tables">
            <span style="color: gray" v-if="orderType == 'add'">系统自动生成，不可编辑</span>
            <span v-else>{{ form.jhdd }}</span>
          </Col>
          <Col span="4" class-name="tables">
            收货人
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <Input
              v-model="form.shr"
              :disabled="form.spzt != '1'"
              placeholder="请输入"
              style="width: 95%"
            />
          </Col>
          <Col span="4" class-name="tables">
            收货人联系方式
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="tables">
            <Input
              v-model="form.shrlxfs"
              :disabled="form.spzt != '1'"
              placeholder="请输入"
              style="width: 95%"
            />
          </Col>
          <Col span="4" class-name="tables">
            供应商
            <span class="mustSpan">*</span>
          </Col>
          <Col span="12" class-name="tables">
            <Select
              clearable
              v-model="form.gys"
              @on-change="gysChange"
              placeholder="请选择供应商(如供应商银行信息不完整,则无法选择)"
              filterable
              style="width: 95%"
              v-if="orderType == 'add'"
            >
              <Option
                v-for="item in gysList"
                :disabled="form.spzt != '1'"
                :value="item.gpId"
                :key="item.gpId"
              >{{ item.gpName }}</Option>
            </Select>
            <span v-else>{{ form.gysmc }}</span>
          </Col>
          <Col span="4" class-name="tables">供方负责人</Col>
          <Col span="4" class-name="tables">{{ form.gffzr }}</Col>
          <Col span="4" class-name="tables">供应商联系电话</Col>
          <Col span="4" class-name="tables">{{ form.gyslxdh }}</Col>
          <Col span="4" class-name="tables">关联申购计划</Col>
          <Col span="4" class-name="tables">{{ form.glsgjh }}</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">
            <span v-if="form.spzt == ''">-</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">
            <span v-if="form.ddzt == ''">-</span>
            <span v-if="form.ddzt == '1'">未下单</span>
            <span v-if="form.ddzt == '2'">待下单</span>
            <span v-if="form.ddzt == '3'">已下单</span>
            <span v-if="form.ddzt == '4'">入库中</span>
            <span v-if="form.ddzt == '5'">已入库</span>
            <span v-if="form.ddzt == '6'">已取消</span>
          </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="6" class-name="uplf">
            <Upload
              :headers="uploadHeaders"
              style="width: 80%"
              multiple
              type="drag"
              :disabled="form.spzt != '1'"
              action="/purchase/common/uploadFile"
              :before-upload="beforeUpload"
              :on-success="uploadFilesSuccess"
              :show-upload-list="false"
              :on-progress="upFilesLoading"
            >
              <!-- :default-file-list="xzwgForm.filesList" -->
              <div style="padding: 5px 0">
                <Icon type="md-cloud-upload" size="36" style="color: #3399ff"></Icon>
                <span>点击或将文件拖拽到这里上传</span>
              </div>
            </Upload>
          </Col>
          <Col span="6" class="upl" style="padding: 5px">
            <div v-for="(item, index) in form.filesList" :key="index">
              <a
                :href="item.docUrl ? item.docUrl : 'javascript:void(0);'"
                :download="item.fileName"
                :target="item.docUrl ? '_blank' : '_self'"
              >{{ item.fileName }}</a>
              <span
                v-if="form.spzt == '1'"
                style="float: right; cursor:pointer"
                @click="form.filesList.splice(index, 1)"
              >x</span>
            </div>
            <p v-if="uploading" style="text-align: center">上传中...</p>
          </Col>
          <Col span="4" class-name="upl">
            发票抬头
            <span class="mustSpan">*</span>
          </Col>
          <Col span="4" class-name="upl">
            <Select v-model="form.fptt" style="width: 95%" :disabled="form.spzt != '1'">
              <Option
                v-for="item in fpttList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="mainCont">
          <Col span="4" class-name="tables">说明</Col>
          <Col span="20" class-name="tables">
            <Input
              v-model="form.sm"
              :disabled="form.spzt != '1'"
              placeholder="请输入"
              style="width: 99%"
            />
          </Col>
        </Row>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </Card>
      <Card style="width:100%" :bordered="false" :dis-hover="true">
        <p slot="title">采购明细</p>
        <div slot="extra">
          <Button
            type="primary"
            @click="mxAddShow"
            :disabled="orderType == 'add' || form.spzt != '1'"
          >新增明细</Button>
        </div>
        <Table
          :columns="tableColumn"
          style="width: 100%"
          :data="tableData"
          :loading="tableLoading"
          @on-select="tableOnSelect"
        >
          <template slot-scope="{ row, index }" slot="purchaseNum">
            <InputNumber
              :min="1"
              :precision="2"
              :disabled="form.spzt != '1' || row.isCancel == '1'"
              v-model="tableData[index].purchaseNum"
              placeholder="请输入"
              style="width: 95%"
            />
          </template>
          <template slot-scope="{ row, index }" slot="applyRuleCode">
            <a @click.prevent="goDetail(74)">{{row.applyRuleCode}}</a>
          </template>
          <template slot-scope="{ row, index }" slot="price">
            <InputNumber
              :min="1"
              :precision="2"
              :disabled="form.spzt != '1'"
              v-model="tableData[index].price"
              placeholder="请输入"
              style="width: 95%"
            />
          </template>
          <template slot-scope="{ row, index }" slot="totalPrice">
            <div>{{ (tableData[index].price * tableData[index].purchaseNum).toFixed(2) }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="plannedArrivalTime">
            <DatePicker
              :disabled="form.spzt != '1'"
              :transfer="true"
              format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              :options="xdrqOption"
              :value="tableData[index].plannedArrivalTime"
              @on-change="tableData[index].plannedArrivalTime=$event"
              placeholder="请选择"
              style="width: 95%"
            ></DatePicker>
          </template>
          <template slot-scope="{ row, index }" slot="isNumControl">
            <RadioGroup v-model="tableData[index].isNumControl">
              <Radio :label="0" :disabled="form.spzt != '1'">
                <span>是</span>
              </Radio>
              <Radio :label="1" :disabled="form.spzt != '1'">
                <span>否</span>
              </Radio>
            </RadioGroup>
          </template>
          <template slot-scope="{ row, index }" slot="isTimeControl">
            <RadioGroup v-model="tableData[index].isTimeControl">
              <Radio :label="0" :disabled="form.spzt != '1'">
                <span>是</span>
              </Radio>
              <Radio :label="1" :disabled="form.spzt != '1'">
                <span>否</span>
              </Radio>
            </RadioGroup>
          </template>
          <template slot-scope="{ row, index }" slot="remark">
            <Input
              :disabled="form.spzt != '1'"
              :maxlength="200"
              v-model="tableData[index].remark"
              placeholder="请输入"
              style="width: 95%"
            />
          </template>
          <template
            slot-scope="{ row, index }"
            slot="isCancel"
          >{{ row.isCancel == '0' ? '有效' : '已取消' }}</template>
          <template slot-scope="{ row, index }" slot="cz">
            <div v-if="form.spzt == '1'">
              <a href="javascript:;" v-if="form.spzt == '1'" @click="deleteRow(index)">删除</a>
            </div>
            <div v-if="row.isCancel == '0' && form.spzt == '3'">
              <a href="javascript:;" @click="cancelRow(row, index)">取消</a>
            </div>
          </template>
        </Table>
      </Card>
    </div>
    <!-- 计划明细新增 -->
    <orderMxAdd ref="mxAdd" @plAdd="plAdd" @return="contentShow = true" v-show="!contentShow" />
    <orderPrint ref="print" @return="() => {printShow = false;}" v-show="printShow" />
  </div>
</template>

<script>
import { phoneFun } from "../../../../../config/util";
import {
  addPurchaseOrder,
  findPurchaseOrder,
  editPurchaseOrder,
  getLabelByCode,
  getProjectList,
  submitPurchaseOrder,
  getLabelByCode4Purchase,
  selectGoodProviderSelectionList,
  queryPurchaseApplyInfo,
  editPurchaseOrderDetailState
} from "@/service/getData";
import orderMxAdd from "./orderMxAdd";
import orderPrint from "./orderPrint";
export default {
  name: "orderAdd",
  props: ["glqyList"],
  components: {
    orderMxAdd,
    orderPrint
  },
  data() {
    return {
      orderType: "add",
      orderId: "",
      requestId: "",
      uploadHeaders: {
        token: localStorage.token,
        userId: localStorage.user_id
      },
      spinShow: false,
      contentShow: true,
      printShow: false,
      form: {
        dgbh: "", //订购编号
        bt: "", //标题
        glqy: "", //关联区域
        glxm: "", //关联项目
        cgr: localStorage.user_name, //采购人
        cgrlxfs: "", //采购人联系方式
        xdrq: "", //下单日期
        jhsj: "", //交货时间
        jhdd: "", //交货地点
        shr: "", //收货人
        shrlxfs: "", //收货人联系方式
        djlx: "", //单据类型
        gys: "", //供应商
        gysmc: "", //供应商名称
        gffzr: "", //供方负责人
        gyslxdh: "", //供应商联系电话
        totalPrice: 0, //总价
        sm: "", //说明
        spzt: 1, //审批状态
        fptt: "", //发票抬头
        sptgsj: "", //审批通过时间
        ddzt: 1, //订单状态
        glsgjh: "", //关联申购计划
        filesList: []
      },
      gysGo: true,
      jhsjOptions: {
        disabledDate: date => {
          return date && date.valueOf() < new Date(this.form.xdrq);
        }
      },
      xdrqOption: {
        disabledDate: date => {
          let nDate = new Date();
          let dn = +new Date(
            `${nDate.getFullYear()}-${nDate.getMonth() + 1}-${nDate.getDate()}`
          );
          return date.valueOf() < dn;
        }
      },
      // glqyList: [{ label: "test", value: 1 }],
      glxmList: [],
      cgrList: [{ label: "test", value: 1 }],
      djlxList: [],
      gysList: [],
      fpttList: [],
      gffzrList: [{ label: "test", value: 1 }],
      uploading: false,
      // 批量设置
      plszShow: false,
      plrkck: "",
      pldhsj: "",
      // table
      tableColumn: [
        {
          title: "申购计划",
          slot: "applyRuleCode",
          tooltip: "true",
          width: 100
        },
        {
          title: "物料编码",
          key: "code",
          tooltip: "true",
          width: 100
        },
        {
          title: "物料分类",
          key: "firstClassName",
          tooltip: "true",
          width: 100
        },
        {
          title: "物料名称",
          key: "materialName",
          tooltip: "true",
          width: 200
        },
        {
          title: "规格型号",
          key: "specs",
          tooltip: "true",
          width: 100
        },
        {
          title: "单位",
          key: "unit",
          tooltip: "true",
          width: 100
        },
        {
          title: "计划数量",
          key: "amount",
          tooltip: "true",
          width: 100
        },
        {
          title: "已下订数量",
          key: "billedAmount",
          tooltip: "true",
          width: 100
        },
        {
          title: "累计入库数量",
          key: "warehousedNum",
          tooltip: "true",
          width: 120
        },
        {
          title: "待采购数量",
          key: "applySurplusNum",
          tooltip: "true",
          width: 120
        },
        {
          title: "采购数量",
          slot: "purchaseNum",
          tooltip: "true",
          width: 100
        },
        {
          title: "单价（元）",
          slot: "price",
          tooltip: "true",
          width: 100
        },
        {
          title: "总价（元）",
          slot: "totalPrice",
          tooltip: "true",
          width: 100
        },
        {
          title: "入库仓库",
          key: "storehouseName",
          tooltip: "true",
          width: 130
        },
        {
          title: "计划到货时间",
          slot: "plannedArrivalTime",
          tooltip: "true",
          width: 150
        },
        {
          title: "数量管控",
          slot: "isNumControl",
          tooltip: "true",
          width: 100
        },
        {
          title: "时间管控",
          slot: "isTimeControl",
          tooltip: "true",
          width: 100
        },
        {
          title: "备注",
          slot: "remark",
          tooltip: "true",
          width: 100
        },
        {
          title: "操作",
          slot: "cz",
          tooltip: "true",
          width: 60
        }
      ],
      tableData: [],
      tableSelect: [],
      deleteIds: [],
      tableLoading: false
    };
  },
  created() {
    getLabelByCode4Purchase({ dictCode: "billType" }).then(res => {
      if (res.status == 200) {
        this.djlxList = res.data;
      } else {
        this.$Message.error(res.message);
      }
    });
    getLabelByCode4Purchase({ dictCode: "invoiceTitle" }).then(res => {
      if (res.status == 200) {
        this.fpttList = res.data;
      } else {
        this.$Message.error(res.message);
      }
    });
    selectGoodProviderSelectionList({ isCheck: true }).then(res => {
      this.gysList = res.data;
    });
  },
  methods: {
    goDetail(id) {
      let routeUrl = this.$router.resolve({
        path: "/viewPurchaseApply",
        query: {
          id: id
        }
      });
      window.open(routeUrl.href, "_blank");
      // window.open(
      //   `https://test.hajwy.com/purchase-web/#/viewPurchaseApply?id=${id}`
      // );
      // this.$router.push(`/viewPurchaseApply?code=${code}`)
    },
    //批量设置弹窗
    plszOpen() {
      this.plszShow = true;
    },
    plszOk() {},
    plszCancel() {},
    //表单上传
    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: ""
      });
    },
    //供应商切换
    gysChange(val) {
      this.gysGo = true;
      let gys = this.gysList.filter(a => a.gpId == val);
      if (gys.length > 0) {
        let sup = gys[0];
        if (!sup.gpcName || !sup.gpcPhone) {
          this.$Message.error(
            "该供应商用户信息不完整，请完善该供应商信息再选择此供应商！"
          );
          this.gysGo = false;
          this.form.gffzr = "";
          this.form.gyslxdh = "";
          return false;
        }
        this.form.gffzr = sup.gpcName;
        this.form.gyslxdh = sup.gpcPhone;
        // bank开户行   unionpay银行账号
      }
    },
    //所属区域切换
    ssqyChange() {
      let postData = {
        areaId: this.form.glqy.split(",")[0],
        userId: localStorage.user_id
      };
      getProjectList(postData).then(res => {
        this.form.glxm = "";
        this.glxmList = res.items;
      });
    },
    //获取采购订单详情
    getCgddXq(id) {
      this.orderId = id;
      let postData = {
        orderId: id
      };
      this.spinShow = true;
      findPurchaseOrder(postData).then(res => {
        this.spinShow = false;
        if (res.status == 200) {
          let data = res.data;
          let tableArr = [];
          this.form.dgbh = data.orderCode;
          this.form.bt = data.title;
          this.form.glqy = data.areaId + "," + data.areaName;
          this.form.glxm = data.projectId + "," + data.projectName;
          // this.form.djlx = data.type;
          this.form.cgr = data.purchaserName;
          this.form.cgrlxfs = data.purchaserTel;
          this.form.xdrq = data.orderTime;
          this.form.jhsj = data.deliveryTime;
          this.form.shr = data.receivedName;
          this.form.shrlxfs = data.receivedTel;
          this.form.gys = data.gpId;
          this.form.gffzr = data.gpcName;
          this.form.gyslxdh = data.gpcPhone;
          this.form.spzt = data.approvalState;
          this.form.fptt = data.invoiceTitleCode;
          if (data.approvalState == "3") {
            this.tableColumn = [
              {
                title: "申购计划",
                slot: "applyRuleCode",
                tooltip: "true",
                width: 100
              },
              {
                title: "物料编码",
                key: "code",
                tooltip: "true",
                width: 100
              },
              {
                title: "物料分类",
                key: "firstClassName",
                tooltip: "true",
                width: 100
              },
              {
                title: "物料名称",
                key: "materialName",
                tooltip: "true",
                width: 200
              },
              {
                title: "规格型号",
                key: "specs",
                tooltip: "true",
                width: 100
              },
              {
                title: "单位",
                key: "unit",
                tooltip: "true",
                width: 100
              },
              {
                title: "计划数量",
                key: "amount",
                tooltip: "true",
                width: 100
              },
              {
                title: "已下订数量",
                key: "billedAmount",
                tooltip: "true",
                width: 100
              },
              {
                title: "累计入库数量",
                key: "warehousedNum",
                tooltip: "true",
                width: 120
              },
              {
                title: "待采购数量",
                key: "applySurplusNum",
                tooltip: "true",
                width: 120
              },
              {
                title: "采购数量",
                slot: "purchaseNum",
                tooltip: "true",
                width: 100
              },
              {
                title: "单价（元）",
                slot: "price",
                tooltip: "true",
                width: 100
              },
              {
                title: "总价（元）",
                slot: "totalPrice",
                tooltip: "true",
                width: 100
              },
              {
                title: "入库仓库",
                key: "storehouseName",
                tooltip: "true",
                width: 130
              },
              {
                title: "计划到货时间",
                slot: "plannedArrivalTime",
                tooltip: "true",
                width: 150
              },
              {
                title: "数量管控",
                slot: "isNumControl",
                tooltip: "true",
                width: 100
              },
              {
                title: "时间管控",
                slot: "isTimeControl",
                tooltip: "true",
                width: 100
              },
              {
                title: "备注",
                slot: "remark",
                tooltip: "true",
                width: 100
              },
              {
                title: "状态",
                slot: "isCancel",
                tooltip: "true",
                width: 100
              },
              {
                title: "操作",
                slot: "cz",
                tooltip: "true",
                width: 60
              }
            ];
          }
          this.form.sm = data.instruction;
          this.form.ddzt = data.orderState;
          this.form.gysmc = data.gpName;
          this.form.jhdd = data.deliveryPlace;
          this.requestId = data.requestId;
          this.form.filesList = data.attachmentList;
          this.orderType = "edit";
          for (let item in data.detailList) {
            tableArr.push({
              applyDetailId: data.detailList[item].applyDetailId,
              applyRuleId: data.detailList[item].applyRuleId,
              applyRuleCode: data.detailList[item].applyRuleCode,
              code: data.detailList[item].detailList[0].code,
              firstClassName:
                data.detailList[item].detailList[0].firstClassName,
              materialName: data.detailList[item].detailList[0].materialName,
              brandName: data.detailList[item].detailList[0].brandName,
              specs: data.detailList[item].detailList[0].specs,
              unit: data.detailList[item].detailList[0].unit,
              isCancel: data.detailList[item].isCancel,
              id: data.detailList[item].id,
              amount: Number(data.detailList[item].detailList[0].amount),
              billedAmount: Number(
                data.detailList[item].detailList[0].billedAmount
              ).toFixed(2),
              inventory: Number(
                data.detailList[item].detailList[0].inventory
              ).toFixed(2),
              storehouseName:
                data.detailList[item].detailList[0].storehouseName,
              price: data.detailList[item].price,
              totalPrice: 0,
              purchaseNum: data.detailList[item].purchaseNum,
              plannedArrivalTime: data.detailList[item].plannedArrivalTime,
              isNumControl: data.detailList[item].isNumControl,
              isTimeControl: data.detailList[item].isTimeControl,
              applySurplusNum: Number(
                data.detailList[item].applySurplusNum
              ).toFixed(2),
              warehousedNum: Number(
                data.detailList[item].warehousedNum
              ).toFixed(2),
              remark: data.detailList[item].remark
            });
            console.log(tableArr);
            this.tableData = tableArr;
          }
          let postData = {
            areaId: data.areaId,
            userId: localStorage.user_id
          };
          getProjectList(postData).then(res => {
            this.glxmList = res.items;
          });
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //审批记录跳转
    toSpjl() {
      let link = `http://gdoa1.kingser.com:88/westvalley/PSWorkflow/PSWorkflowDecode.jsp?loginmsg=bG9naW5pZD1wbXMmdXNlcnBhc3N3b3JkPVBBYjEyMzQ1Nio=&requestid=${this.requestId}`;
      window.open(link);
    },
    //编辑采购订单
    editCgdd() {
      for (let i in this.tableData) {
        if (this.tableData[i].purchaseNum <= 0) {
          this.$Message.error("计划明细申购数量不能小于或等于0！");
          return false;
        }
        if (this.tableData[i].price <= 0) {
          this.$Message.error("计划明细单价不能小于或等于0！");
          return false;
        }
      }
      let gpName = this.gysList.filter(a => a.gpId == this.form.gys);
      for (let i in this.tableData) {
        this.tableData[i].price = Number(this.tableData[i].price);
        this.tableData[i].purchaseNum = Number(this.tableData[i].purchaseNum);
        this.tableData[i].totalPrice = Number(
          this.tableData[i].price * this.tableData[i].purchaseNum
        );
      }
      return new Promise((resolve, reject) => {
        let postData = {
          areaId: this.form.glqy.split(",")[0],
          areaName: this.form.glqy.split(",")[1],
          projectId: this.form.glxm.split(",")[0],
          projectName: this.form.glxm.split(",")[1],
          purchaserId: localStorage.user_id,
          purchaserName: localStorage.user_name,
          purchaserTel: this.form.cgrlxfs,
          receivedName: this.form.shr,
          receivedTel: this.form.shrlxfs,
          orderTime: this.form.xdrq,
          invoiceTitleCode: this.form.fptt,
          // deliveryStartTime: this.form.jhsj[0],
          // deliveryEndTime: this.form.jhsj[1],
          deliveryTime: this.form.jhsj,
          deliveryPlace: this.form.jhdd,
          // type: this.form.djlx,
          instruction: this.form.sm,
          attachmentList: this.form.filesList,
          gpId: this.form.gys, //供应商ID
          gpNmae: gpName.length ? gpName[0].gpName : "", //供应商Name
          orderId: this.orderId,
          // deleteId: this.deleteIds.join(","),
          attachmentList: this.form.filesList,
          detailList: this.tableData
        };
        this.spinShow = true;
        this.tableLoading = true;
        editPurchaseOrder(postData).then(res => {
          this.spinShow = false;
          this.tableLoading = false;
          if (res.status == 200) {
            this.$Message.success("编辑采购订单成功!");
            this.getCgddXq(this.orderId);
            resolve();
          } else {
            this.$Message.error(res.message);
            reject();
          }
        });
      });
    },
    submitCgdd() {
      this.editCgdd().then(() => {
        let gpName = this.gysList.filter(a => a.gpId == this.form.gys);
        let postData = {
          orderId: this.orderId
        };
        submitPurchaseOrder(postData).then(res => {
          if (res.status == 200) {
            this.$Message.success("提交采购订单成功!");
            this.form.spzt = "2";
          } else {
            this.$Message.error(res.message);
          }
        });
      });
    },
    //新增采购订单
    addCgdd() {
      let mustArr = [
        "glqy",
        "glxm",
        "xdrq",
        "jhsj",
        "cgrlxfs",
        "shr",
        "shrlxfs",
        "gys",
        "fptt"
      ];
      for (let i in mustArr) {
        if (mustArr[i] == "cgrlxfs") {
          if (!phoneFun(this.form[mustArr[i]])) {
            this.$Message.error("请填写正确的采购人联系方式！");
            return false;
          }
        }
        if (mustArr[i] == "shrlxfs") {
          if (!phoneFun(this.form[mustArr[i]])) {
            this.$Message.error("请填写正确的收货人联系方式！");
            return false;
          }
        }
        if (!this.form[mustArr[i]]) {
          this.$Message.error("请将信息填写完整！");
          return false;
        }
        if (this.form[mustArr[i]] == "" || this.form[mustArr[i]].length == 0) {
          this.$Message.error("请将信息填写完整！");
          return false;
        }
      }
      if (!this.gysGo) {
        this.$Message.error(
          "供应商信息不完整，请完善供应商信息或选择其他供应商！"
        );
        return false;
      }
      if (this.orderType == "edit") {
        this.editCgdd();
        return false;
      }
      let gpName = this.gysList.filter(a => a.gpId == this.form.gys);
      let postData = {
        areaId: this.form.glqy.split(",")[0],
        areaName: this.form.glqy.split(",")[1],
        projectId: this.form.glxm.split(",")[0],
        projectName: this.form.glxm.split(",")[1],
        purchaserId: localStorage.user_id,
        purchaserName: localStorage.user_name,
        purchaserTel: this.form.cgrlxfs,
        receivedName: this.form.shr,
        receivedTel: this.form.shrlxfs,
        orderTime: this.form.xdrq,
        invoiceTitleCode: this.form.fptt,
        // deliveryStartTime: this.form.jhsj[0],
        // deliveryEndTime: this.form.jhsj[1],
        deliveryTime: this.form.jhsj,
        deliveryPlace: this.form.jhdd,
        // type: this.form.djlx,
        instruction: this.form.sm,
        attachmentList: this.form.filesList,
        gpId: this.form.gys, //供应商ID
        gpNmae: gpName.length ? gpName[0].gpName : "" //供应商Name
      };
      this.spinShow = true;
      addPurchaseOrder(postData).then(res => {
        this.spinShow = false;
        if (res.status == 200) {
          this.$Message.success("新增采购订单成功！");
          this.orderId = res.data.orderId;
          this.form.dgbh = res.data.orderCode;
          this.form.bt = res.data.title;
          this.form.jhdd = res.data.deliveryPlace;
          this.form.filesList = res.data.attachmentList;
          this.orderType = "edit";
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //新增明细
    mxAddShow() {
      this.contentShow = false;
      if (this.tableData.length > 0) {
        this.$refs.mxAdd.searchForm.ck = String(this.tableData[0].storehouseId);
        this.$refs.mxAdd.ckLock = true;
      } else {
        this.$refs.mxAdd.searchForm.ck = "";
        this.$refs.mxAdd.ckLock = false;
      }
      this.$refs.mxAdd.gpId = this.form.gys;
      this.$refs.mxAdd.orderId = this.orderId;
      this.$refs.mxAdd.approvalState = this.form.spzt;
      this.$refs.mxAdd.orderState = this.form.ddzt;
      this.$refs.mxAdd.areaId = this.form.glqy;
      this.$refs.mxAdd.projectId = this.form.glxm;
      this.$refs.mxAdd.getTableData();
      this.$refs.mxAdd.getCk();
    },
    //列表方法
    getTableData() {
      this.spinShow = false;
    },
    //删除采购明细
    deleteRow(index) {
      if (this.deleteIds.indexOf(this.tableData[index].applyDetailId) == -1) {
        this.deleteIds.push(this.tableData[index].applyDetailId);
      }
      this.tableData.splice(index, 1);
    },
    //取消采购明细
    cancelRow(row, index) {
      if (this.form.cgr != localStorage.user_name) {
        this.$Message.error(
          "当前登录人与该订单采购人非同一人，无法取消该明细!"
        );
      }
      editPurchaseOrderDetailState(row.id).then(res => {
        if (res.status == 200) {
          this.$Message.success("取消采购订单明细成功！");
          this.tableData[index].isCancel = 1;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //批量添加
    plAdd(list) {
      console.log(list);
      for (let item in list) {
        if (this.deleteIds.indexOf(list[item].applyDetailId) != -1) {
          this.deleteIds.splice(
            this.deleteIds.indexOf(list[item].applyDetailId),
            1
          );
        }
        if (
          this.tableData.filter(
            a => a.applyDetailId == list[item].applyDetailId
          ).length > 0
        ) {
        } else {
          this.tableData.push(list[item]);
        }
      }
    },
    printRow() {
      this.printShow = true;
      this.$refs.print.getData(this.orderId);
    },
    tableOnSelect(selection, row) {},
    //取消、返回
    cancel() {
      this.form.dgbh = "";
      this.form.bt = "";
      this.form.glqy = "";
      this.form.glxm = "";
      this.form.djlx = "";
      this.form.cgr = "";
      this.form.cgrlxfs = "";
      this.form.xdrq = "";
      this.form.jhsj = "";
      this.form.jhdd = "";
      this.form.shr = "";
      this.form.shrlxfs = "";
      this.form.gys = "";
      this.form.gffzr = "";
      this.form.gyslxdh = "";
      this.form.sm = "";
      this.form.filesList = [];
      this.form.ddzt = 1;
      this.form.spzt = 1;
      this.tableData = [];
      this.deleteIds = [];
      this.orderType = "add";
      this.form.fptt = "";
      this.spinShow = false;
      this.tableColumn = [
        {
          title: "申购计划",
          slot: "applyRuleCode",
          tooltip: "true",
          width: 100
        },
        {
          title: "物料编码",
          key: "code",
          tooltip: "true",
          width: 100
        },
        {
          title: "物料分类",
          key: "firstClassName",
          tooltip: "true",
          width: 100
        },
        {
          title: "物料名称",
          key: "materialName",
          tooltip: "true",
          width: 200
        },
        {
          title: "规格型号",
          key: "specs",
          tooltip: "true",
          width: 100
        },
        {
          title: "单位",
          key: "unit",
          tooltip: "true",
          width: 100
        },
        {
          title: "计划数量",
          key: "amount",
          tooltip: "true",
          width: 100
        },
        {
          title: "已下订数量",
          key: "billedAmount",
          tooltip: "true",
          width: 100
        },
        {
          title: "累计入库数量",
          key: "warehousedNum",
          tooltip: "true",
          width: 120
        },
        {
          title: "待采购数量",
          key: "applySurplusNum",
          tooltip: "true",
          width: 120
        },
        {
          title: "采购数量",
          slot: "purchaseNum",
          tooltip: "true",
          width: 100
        },
        {
          title: "单价（元）",
          slot: "price",
          tooltip: "true",
          width: 100
        },
        {
          title: "总价（元）",
          slot: "totalPrice",
          tooltip: "true",
          width: 100
        },
        {
          title: "入库仓库",
          key: "storehouseName",
          tooltip: "true",
          width: 130
        },
        {
          title: "计划到货时间",
          slot: "plannedArrivalTime",
          tooltip: "true",
          width: 150
        },
        {
          title: "数量管控",
          slot: "isNumControl",
          tooltip: "true",
          width: 100
        },
        {
          title: "时间管控",
          slot: "isTimeControl",
          tooltip: "true",
          width: 100
        },
        {
          title: "备注",
          slot: "remark",
          tooltip: "true",
          width: 100
        },
        {
          title: "操作",
          slot: "cz",
          tooltip: "true",
          width: 60
        }
      ];
      this.$emit("return");
    }
  },
  watch: {
    tableData: {
      handler(val, name) {
        let total = 0;
        let arr = [];
        let str = "";
        for (let item in val) {
          if (val[item].isCancel) {
          } else {
            total += val[item].price * val[item].purchaseNum;
          }
          arr.push(val[item].applyRuleCode);
        }
        let set = new Set(arr);
        this.form.totalPrice = total.toFixed(2);
        this.form.glsgjh = [...set].join(",");
      },
      deep: true
    }
  }
};
</script>

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