byte-sailing-storage/src/view/material-manege/contract/modal.vue

<template>
  <modal v-model="modal" width="800px" class-name="vertical-center-modal">
    <div class="content">
      <div class="title">福州杰生广印工艺品有限责任公司</div>
      <div class="title">采购合同</div>
      <div class="row">
        <div class="col">
          <div class="label">合同编号：</div>
          <div class="value">{{ data.contractCode }}</div>
        </div>
        <div class="col">
          <div class="label">交货日期：</div>
          <div class="value">
            {{ $dayjs(data.deliverTime).format('YYYY-MM-DD') }}
          </div>
        </div>
      </div>
      <div class="text">
        <p>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          兹经充分协商，买卖双方愿就以下条件达成协议，共同遵守执行，该合同对双方均有约束力，卖方在收到合同后如有异议请于三天内提出，否则视为接受合同全部条款。
        </p>
      </div>
      <div class="table">
        <table>
          <tr>
            <th>件号</th>
            <th>物料名称</th>
            <th>规格</th>
            <th>单位</th>
            <th>采购数量</th>
            <th>单价</th>
            <th>小计</th>
            <th>备注</th>
          </tr>
          <tr>
            <td>{{ data.materialCode }}</td>
            <td>{{ data.materialName }}</td>
            <td>{{ data.materialSpec }}</td>
            <td>{{ data.materialUnit }}</td>
            <td>{{ data.buyQuantity }}</td>
            <td>{{ data.price }}</td>
            <td>{{ data.buyQuantity * data.price || 0 }}</td>
            <td>{{ data.remark }}</td>
          </tr>
        </table>
      </div>
      <div class="text" v-if="data.categoryCode === '03.008.'">
        <p>
          1、交货地点: 货物通过指定物流发货，到货地为福州。 收货人：17750201167
          程义成。
        </p>
        <p>2、质量要求及技术指标: 以确认样和合同上的数据为准。</p>
        <p>
          3、标签、条形码和唛头要求:
          外箱，内盒上必须标明产品的规格型号，颜色，批次。
        </p>
        <p>
          4、包装条件及规格要求:普通包装，以运输途中不损坏货物为标准。外包装上注明货品名称，数量，内附清单，实际到货以清单为准。
        </p>
        <p>
          5、验受标准及质量索赔:
          以我司验受为标准；因仅是抽检,卖方的出货品质需与成交样品品质一致,若有差异买方有权拒收货物，供方应对因产品本身质量问题产生的责任负责，包含连带损耗的纸张，面料等直接费用。
        </p>
        <p>
          6、违约责任及其它事项: 合同经确认后, 如发生违约,
          由违约方承担一切责任。履约地在福州。
        </p>
        <p>
          7、禁止卖方向买方人员进行直接或间接的利益输送，包括但不限于任何形式的回扣、馈赠、礼物、宴请等，卖方应遵守相应的廉洁条款，若违反本约定的一经发现，买方有权单方面取消与卖方的合作，并有权追究因此引起的买方的一切损失和法律后果
        </p>
      </div>
      <div class="text" v-else>
        <p>
          1、交货地点：货物通过指定物流发货，到货地为福州。物流送货上门。收货人：程义成
        </p>
        <p>
          2、质量要求及技术指标：以确认样和合同上的数据为准。面料允收情况为：脏污现象每百米≤4处，抽丝每百米≤4处且米数不得超过3米，缩水门幅控制在2.5%以内。
        </p>
        <p>
          3、标签、条形码和唛头要求：每卷面料外包装上需贴标签，注明面料名称、规格、米数，以便区分、查验。码单交由物流人员，随货到厂。实际到货情况以我方清点后数据为准。
        </p>
        <p>
          4、包装条件及规格要求：普通包装，以运输途中不损坏货物为标准。直喷面料打卷纸管内径不得小于7.6cm。
        </p>
        <p>
          5、验收标准及质量索赔：以我司验收为标准：因仅是抽检，卖方的出货品质需与成交样品品质一致，若有差异买方有权拒收货物，供方对因产品本身质量问题产生的责任负责。
        </p>
        <p>
          6、违约责任及其他事项：合同经确认后，如发生违约，由违约方承担一切责任。履约地在福州。
        </p>
        <p>
          7、禁止卖方向买方人员进行直接或间接的利益输送，包括但不限于任何形式的回扣、馈赠、礼物、宴请等，卖方应遵守相应的廉洁条款，若违反本约定的一经发现，买方有权单方面取消与卖方的合作，并有权追究因此引起的买方的一切损失和法律后果。
        </p>
        <p>8、价格条件：含税，含运费价格</p>
        <p>
          9、付款条款：
          <Input
            v-model="data.accountPeriod"
            size="small"
            type="number"
            style="width: 60px;margin-right: 5px"
          />
          天账期，供方提供13%增值税{{
            data.invoiceType === 0 ? '专用' : '普通'
          }}发票
        </p>
      </div>
      <div class="row" style="margin-bottom: 10px;">
        <div
          class="col"
          style="align-items: flex-start;justify-content: flex-start"
        >
          <div class="label">备注：</div>
          <!-- :readonly="data.contractApproveState === '待确认' ? false : true" -->
          <div class="value" style="flex: 1">
            <Input
              v-model="remark"
              
              type="textarea"
            />
          </div>
        </div>
      </div>
      <div class="row" style="margin-bottom: 10px;">
        <div class="col">
          <div class="label">需方：</div>
          <div class="value">福州杰生广印工艺品有限责任公司</div>
        </div>
        <div class="col">
          <div class="label">供方：</div>
          <div class="value" style="flex: 1">
            <Input
              v-if="data.status === 0"
              v-model="data.supplierName"
              search
              enter-button="选择供应商"
              size="small"
              @on-search="chooseGys"
            />
            <span v-else>{{ data.supplierName }}</span>
          </div>
        </div>
      </div>
      <div class="row" style="margin-bottom: 10px;">
        <div class="col">
          <div class="label">传真：</div>
          <div class="value">0519-83986808</div>
        </div>
        <div class="col" style="justify-content: flex-start">
          <div class="label">传真：</div>
          <div class="value"></div>
        </div>
      </div>
      <div class="row" style="margin-bottom: 10px;">
        <div class="col"></div>
        <div class="col">
          <div class="label">签约日期：</div>
          <div class="value">
            {{ $dayjs(data.signTime).format('YYYY-MM-DD') }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="footer"
      v-if="data.status === 0"
      slot="footer"
    >
      <Button @click="cfm" class="btn" type="primary">提交</Button>
      <Button @click="cancel" class="btn">取消</Button>
    </div>
    <div class="footer" v-else slot="footer">
      <Button @click="cancel" class="btn" type="primary">关闭</Button>
    </div>
    <modal
      v-model="show"
      :footer-hide="true"
      width="700px"
      class-name="vertical-center-modal"
      @on-cancel="gysCancel"
    >
      <div
        class="title"
        style="text-align: center;font-size: 20px;font-weight: bold;padding-bottom: 20px;"
      >
        选择供应商
      </div>
      <my-table
        :height="300"
        :multiple="true"
        :data="gysData"
        :columns="columns"
        :table-filter="tableFilter"
        :table-page="params"
        @event-handle="eventHandle"
        @on-change="changePage"
        @on-select="gysSelct"
      >
      </my-table>
    </modal>
  </modal>
</template>

<script>
import MyTable from '_c/my-table/my-table'
import { GetFacPricePageList } from '@/api/baseData'
import { PurcherUpdate } from '@/api/applyPurchase'
export default {
  name: 'my-modal',
  data () {
    return {
      remark: '',
      gys: {},
      gysData: [],
      show: false,
      modal: false,
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        // {
        //   title: '供应商代码',
        //   key: 'factoryId',
        //   minWidth: 150
        // },
        {
          title: '供应商名称',
          key: 'materialCode',
          minWidth: 150
        },
        {
          title: '供应商单价',
          key: 'price',
          minWidth: 150
        },
        {
          title: '账期',
          key: 'accountDate',
          minWidth: 150
        },
        {
          title: '账期说明',
          key: 'accountDateRemark',
          minWidth: 150
        }
      ],
      tableFilter: [
        {
          name: 'Input',
          value: 'keyword',
          placeholder: '请输入关键字'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '查询',
          e: 'search'
        },
        {
          name: 'Button',
          type: 'primary',
          text: '确认',
          align: 'right',
          e: 'add'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  components: {
    MyTable
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
    }
  },
  methods: {
    cancel () {
      this.remark = ''
      this.gys = {}
      this.modal = false
    },
    cfm () {
      if (!this.gys.id) {
        return this.$Message.error('请选择供应商！')
      }
      this.$post('/api/storage-restructure/contract/flowCreate',{
        id: this.data.contractId,
        supplierId:this.gys.id,
        accountDate:this.gys.accountDate,
        signTime:this.data.signTime,
        deliverTime:this.data.deliverTime,
        price:this.gys.price,
        quantity:this.data.buyQuantity,
        remark: this.remark
      }).then(res=>{
        this.$Message.info(res.msg || '提交成功！')
        this.cancel()
        this.$emit('getlist')
      })
      return
      PurcherUpdate({
        
        deliverTime: this.data.deliverTime,
        accountPeriod: this.data.accountPeriod,
        taxValue: 0.13,
        invoiceType: this.data.invoiceType,
        signTime: this.data.signTime,
        price: this.gys.price,
        supplierId: this.gys.factoryId,
        remark: this.remark
      }).then(res => {
        if (res.code === 0) {
          this.$Message.info(res.msg || '提交成功！')
          this.cancel()
          this.$emit('getlist')
        }
      })
    },
    // 打开选择供应商
    chooseGys () {
      this.getList()
      this.show = true
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.keyword = option.keyword
          this.getList()
          break
        case 'add':
          this.gysCfm()
          break
      }
    },
    gysCfm () {
      this.show = false
      console.log('select-------------------')
      console.log(this.gys)
      this.data.price = this.gys.price
      this.data.supplierName = this.gys.supplierName
      this.data.accountPeriod = this.gys.accountDate
    },
    /* 供应商弹窗取消 */
    gysCancel () {
      this.gys = {}
    },
    gysSelct (selection, data) {
      this.gys = { ...data }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    getList () {
      this.$post('/api/storage-restructure/supplier/page', {
        ...this.params,
        materialId: this.data.materialId
      })
				.then((res) => {
					this.gysData = res.data.records
          this.params.total = res.data.total
				}) 
      
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 0 40px;
  font-size: 14px;
  .title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    .col {
      flex: 1;
      display: flex;
      align-items: center;
      .label {
      }
      &:last-child {
        justify-content: flex-end;
        .label {
          width: auto;
        }
        .value {
          width: 100px;
        }
      }
    }
  }
  .text {
    padding: 10px 0;
    p {
      margin-bottom: 3px;
    }
  }
  .table {
    table {
      border-collapse: collapse;
      border: none;
      width: 100%;
      tr {
        th {
          background-color: #eeeeee;
        }
        td,
        th {
          padding: 5px;
          text-align: center;
          border: solid #dcdee2 1px;
          position: relative;
          font-size: 12px;
        }
      }
    }
  }
}
</style>