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

<template>
  <div>
    <!-- 页面主体内容 -->
    <div class="planAddContent" v-show="contentShow">
      <Card style="width:100%" :bordered="false" :dis-hover="true">
        <p slot="title">采购订单详情</p>
        <div slot="extra">
          <Button
            @click="submitCgdd"
            v-if="(orderType == 'edit') && (form.spzt == '1' || form.spzt == '4')"
          >提交</Button>
          <Button @click="addCgdd" v-if="form.spzt == '1' || form.spzt == '' || form.spzt == '4'">保存</Button>
          <Button @click="cancel">取消</Button>
        </div>
        <Row class="mainCont">
          <Col span="4" class-name="tables">订购编号</Col>
          <Col span="4" class-name="tables">
            <!-- <span v-if="orderType == 'add'">保存成功后生成</span>
            <span v-else>{{ form.dgbh }}</span>-->
            {{ orderType == 'add' ? '保存成功后生成' : form.dgbh }}
          </Col>
          <Col span="4" class-name="tables">标题</Col>
          <Col span="4" class-name="tables">
            <span 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">关联区域</Col>
          <Col span="4" class-name="tables">
            <Select
              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">关联项目</Col>
          <Col span="4" class-name="tables">
            <Select 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>s{{ form.glxm.split(',')[1] }}</span>
          </Col>
          <Col span="4" class-name="tables">单据类型</Col>
          <Col span="4" class-name="tables">
            <Select v-model="form.djlx" style="width: 95%">
              <Option
                v-for="item in djlxList"
                :value="item.value"
                :key="item.value"
                :disabled="form.spzt == '2' || form.spzt == '3'"
              >{{ 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">采购人联系方式</Col>
          <Col span="4" class-name="tables">
            <Input
              v-model="form.cgrlxfs"
              :disabled="form.spzt == '2' || form.spzt == '3'"
              placeholder="请输入"
              style="width: 95%"
            />
          </Col>
          <Col span="4" class-name="tables">下单日期</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"
              placeholder="请选择"
              :disabled="form.spzt == '2' || form.spzt == '3'"
            ></DatePicker>
          </Col>
          <Col span="4" class-name="tables">交货时间</Col>
          <Col span="4" class-name="tables">
            <DatePicker
              :disabled="form.xdrq == '' || form.spzt != '1'"
              style="width: 95%"
              format="yyyy-MM-dd HH:mm:ss"
              :value="form.jhsj"
              :options="jhsjOptions"
              @on-change="form.jhsj=$event"
              type="datetimerange"
              placeholder="请选择"
            ></DatePicker>
          </Col>
          <Col span="4" class-name="tables">交货地点</Col>
          <Col span="4" class-name="tables">{{ form.jhdd }}</Col>
          <Col span="4" class-name="tables">收货人</Col>
          <Col span="4" class-name="tables">
            <Input
              v-model="form.shr"
              :disabled="form.spzt == '2' || form.spzt == '3'"
              placeholder="请输入"
              style="width: 95%"
            />
          </Col>
          <Col span="4" class-name="tables">收货人联系方式</Col>
          <Col span="4" class-name="tables">
            <Input
              v-model="form.shrlxfs"
              :disabled="form.spzt == '2' || form.spzt == '3'"
              placeholder="请输入"
              style="width: 95%"
            />
          </Col>
          <Col span="4" class-name="tables">供应商</Col>
          <Col span="12" class-name="tables">
            <Select
              v-model="form.gys"
              @on-change="gysChange"
              filterable
              style="width: 95%"
              v-if="orderType == 'add'"
            >
              <Option
                v-for="item in gysList"
                :disabled="form.spzt == '2' || form.spzt == '3'"
                :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>
        </Row>
        <Row class="uplCont" type="flex" justify="center" style="align-items: stretch">
          <Col span="4" class-name="upl">附件</Col>
          <Col span="10" class-name="uplf">
            <Upload
              :headers="uploadHeaders"
              style="width: 80%"
              multiple
              type="drag"
              :disabled="form.spzt == '2' || form.spzt == '3'"
              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="10" class="upl" style="padding: 5px">
            <div v-for="(item, index) in form.filesList" :key="index">
              <a href="javascript:;">{{ item.fullName }}</a>
              <span style="float: right; cursor:pointer" @click="form.filesList.splice(index, 1)">x</span>
            </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">
            <Input
              v-model="form.sm"
              :disabled="form.spzt == '2' || form.spzt == '3'"
              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'">新增明细</Button>
        </div>
        <Table
          :columns="tableColumn"
          style="width: 100%"
          :data="tableData"
          :loading="tableLoading"
          @on-select="tableOnSelect"
        >
          <template slot-scope="{ row, index }" slot="purchaseNum">
            <Input
              :disabled="form.spzt == '2'"
              v-model="tableData[index].purchaseNum"
              placeholder="请输入"
              style="width: 95%"
            />
          </template>
          <template slot-scope="{ row, index }" slot="price">
            <Input
              :disabled="form.spzt == '2' || form.spzt == '3'"
              v-model="tableData[index].price"
              placeholder="请输入"
              style="width: 95%"
            />
          </template>
          <template slot-scope="{ row, index }" slot="totalPrice">
            <div>{{ tableData[index].price * tableData[index].purchaseNum }}</div>
          </template>
          <template slot-scope="{ row, index }" slot="plannedArrivalTime">
            <DatePicker
              :disabled="form.spzt == '2' || form.spzt == '3'"
              :transfer="true"
              format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              :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="1" :disabled="form.spzt == '2' || form.spzt == '3'">
                <span>是</span>
              </Radio>
              <Radio :label="2" :disabled="form.spzt == '2' || form.spzt == '3'">
                <span>否</span>
              </Radio>
            </RadioGroup>
          </template>
          <template slot-scope="{ row, index }" slot="isTimeControl">
            <RadioGroup v-model="tableData[index].isTimeControl">
              <Radio :label="1" :disabled="form.spzt == '2' || form.spzt == '3'">
                <span>是</span>
              </Radio>
              <Radio :label="2" :disabled="form.spzt == '2' || form.spzt == '3'">
                <span>否</span>
              </Radio>
            </RadioGroup>
          </template>
          <template slot-scope="{ row, index }" slot="cz">
            <div>
              <a href="javascript:;" v-if="form.spzt != '2'" @click="deleteRow(index)">删除</a>
            </div>
          </template>
        </Table>
      </Card>
      <!-- <Modal v-model="plszShow" title="批量设置" @on-ok="plszOk" @on-cancel="plszCancel">
        <Row class="mainCont">
          <Col span="12" class-name="tables">入库仓库</Col>
          <Col span="12" class-name="tables">
            <Select v-model="plrkck" style="width: 95%" :transfer="true">
              <Option v-for="item in ckList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <Col span="12" class-name="tables">计划到货时间</Col>
          <Col span="12" class-name="tables">
            <DatePicker
              :transfer="true"
              format="yyyy-MM-dd"
              type="date"
              :value="pldhsj"
              @on-change="pldhsj=$event"
              placeholder="请选择"
              style="width: 95%"
            ></DatePicker>
          </Col>
        </Row>
      </Modal>-->
    </div>
    <!-- 计划明细新增 -->
    <orderMxAdd ref="mxAdd" @plAdd="plAdd" @return="contentShow = true" v-show="!contentShow" />
  </div>
</template>

<script>
import {
  addPurchaseOrder,
  findPurchaseOrder,
  editPurchaseOrder,
  getLabelByCode,
  getProjectList,
  submitPurchaseOrder
} from "@/service/getData";
import orderMxAdd from "./orderMxAdd";
export default {
  props: ["gysList", "glqyList"],
  components: {
    orderMxAdd
  },
  data() {
    return {
      orderType: "add",
      orderId: "",
      uploadHeaders: {
        token: localStorage.token,
        userId: localStorage.user_id
      },
      spinShow: false,
      contentShow: true,
      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, //审批状态
        sptgsj: "", //审批通过时间
        ddzt: "", //订单状态
        glsgjh: "", //关联申购计划
        filesList: []
      },
      jhsjOptions: {
        disabledDate: date => {
          return date && date.valueOf() < new Date(this.form.xdrq);
        }
      },
      // glqyList: [{ label: "test", value: 1 }],
      glxmList: [],
      cgrList: [{ label: "test", value: 1 }],
      djlxList: [],
      // gysList: [{ label: "test", value: 1 }],
      gffzrList: [{ label: "test", value: 1 }],
      uploading: false,
      // 批量设置
      plszShow: false,
      plrkck: "",
      pldhsj: "",
      // table
      tableColumn: [
        {
          title: "申购计划",
          key: "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: 100
        },
        {
          title: "品牌",
          key: "brandName",
          tooltip: "true",
          width: 100
        },
        {
          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: "cz",
          tooltip: "true",
          fixed: "right",
          width: 60
        }
      ],
      tableData: [],
      tableSelect: [],
      deleteIds: [],
      tableLoading: false
    };
  },
  created() {
    getLabelByCode({ dictCode: "billType" }).then(res => {
      if (res.status == 200) {
        this.djlxList = res.data;
      } else {
        this.$Message.error(res.message);
      }
    });
  },
  methods: {
    //批量设置弹窗
    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,
        resPath: response.data.filePath,
        fileDetailType: ""
      });
    },
    //供应商切换
    gysChange(val) {
      let gys = this.gysList.filter(a => a.gpId == val)[0];
      this.form.gffzr = gys.gpcName;
      this.form.gyslxdh = gys.gpcPhone;
    },
    //所属区域切换
    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.deliveryStartTime, data.deliveryEndTime];
          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.sm = data.instruction;
          this.form.ddzt = data.orderState;
          this.form.gysmc = data.gpName;
          this.form.jhdd = data.deliveryPlace;
          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,
              amount: data.detailList[item].detailList[0].amount,
              billedAmount: data.detailList[item].detailList[0].billedAmount,
              inventory: data.detailList[item].detailList[0].inventory,
              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: data.detailList[item].applySurplusNum,
              warehousedNum: data.detailList[item].warehousedNum,
              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);
        }
      });
    },
    //编辑采购订单
    editCgdd() {
      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,
        deliveryStartTime: this.form.jhsj[0],
        deliveryEndTime: this.form.jhsj[1],
        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);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    submitCgdd() {
      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("提交采购订单成功!");
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //新增采购订单
    addCgdd() {
      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,
        deliveryStartTime: this.form.jhsj[0],
        deliveryEndTime: this.form.jhsj[1],
        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.orderType = "edit";
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //新增明细
    mxAddShow() {
      this.contentShow = false;
      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);
    },
    //批量添加
    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]);
        }
      }
    },
    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.shr = "";
      this.form.shrlxfs = "";
      this.form.gys = "";
      this.form.gffzr = "";
      this.form.gyslxdh = "";
      this.form.sm = "";
      this.form.filesList = [];
      this.form.spzt = 1;
      this.tableData = [];
      this.deleteIds = [];
      this.orderType = "add";
      this.spinShow = false;
      this.$emit("return");
    }
  },
  watch: {
    tableData: {
      handler(val, name) {
        let total = 0;
        let str = "";
        for (let item in val) {
          total += val[item].price * val[item].purchaseNum;
          str += val[item].applyRuleCode + ",";
        }
        this.form.totalPrice = total;
        this.form.glsgjh = str.replace(/\,$/, "");
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
button {
  min-width: 80px;
}
.uplCont {
  border-left: 1px solid #e4e4e4;
  .upl {
    flex: auto;
    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 {
  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>