X-web/src/views/modules/sale/outsource-add-or-update.vue

<!-- 委外新增、修改 -->
<template>
    <div>
        <div class="my-title">委外</div>
        <!-- 表单 -->
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
          <el-row class="my-row">
            <el-col :span="8">
              <el-form-item label="委外编码" prop="purchaseCode">
                <el-input v-model="dataForm.purchaseCode" disabled placeholder="委外编码由系统生成"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="付款方式" prop="payType">
                <el-radio-group v-model="dataForm.payType">
                  <el-radio :label='"1"'>对公转账</el-radio>
                  <el-radio :label='"2"'>先行垫付</el-radio>
                  <el-radio :label='"3"'>财务预支</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-row">
            <el-col :span="8">
              <el-form-item label="委外类别" prop="commissionType">
                <el-select
                  v-model="dataForm.commissionType"
                  remote
                  placeholder="请选择">
                  <el-option
                    v-for="item in optionsType"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="title"><span style="color: red">*</span> 委外产品明细</div>
          <el-row class="my-row">
            <el-table
              :data="productDetails"
              border
              style="width: 100%;">
              <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center">
              </el-table-column>
              <el-table-column
                prop="detailId"
                label="ID"
                v-if="false">
              </el-table-column>
              <el-table-column
                prop="productName"
                header-align="center"
                align="center"
                min-width="120"
                label="产品名称">
              </el-table-column>
              <el-table-column
                prop="prodCode"
                header-align="center"
                align="center"
                min-width="120"
                label="产品编号">
              </el-table-column>
              <el-table-column
                prop="productSpec"
                header-align="center"
                align="center"
                min-width="120"
                label="型号及规格">
              </el-table-column>
              <el-table-column
                prop="cnt"
                header-align="center"
                align="center"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="unitName"
                header-align="center"
                align="center"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="deadline"
                header-align="center"
                align="center"
                min-width="140"
                :show-tooltip-when-overflow="true"
                label="委外期限">
              </el-table-column>
              <el-table-column
                prop="batchNumber"
                header-align="center"
                align="center"
                min-width="120"
                :show-tooltip-when-overflow="true"
                label="批次号">
              </el-table-column>
              <el-table-column
                prop="specificationExplian"
                header-align="center"
                align="center"
                min-width="120"
                :show-tooltip-when-overflow="true"
                label="要求说明">
              </el-table-column>
              <el-table-column
                prop="arrivedTime"
                header-align="center"
                align="center"
                min-width="140"
                :show-tooltip-when-overflow="true"
                label="到料时间">
              </el-table-column>
              <el-table-column
                prop="qualifiedCnt"
                header-align="center"
                align="center"
                label="合格数量">
              </el-table-column>
              <el-table-column
                prop="technologyFile"
                header-align="center"
                align="center"
                min-width="160"
                :show-tooltip-when-overflow="true"
                label="工艺文件">
              </el-table-column>
              <el-table-column
                prop="attachList"
                header-align="center"
                align="center"
                label="附件">
                <template slot-scope="scope">
                  <div v-for="(item, index) in scope.row.attachList" style="display: inline">
                    <span v-if="index > 0">,</span>
                    <a :key="item.fileName + index" type="primary" href="#" @click="previewFile(item.fileName, item.url)">{{ item.fileName }}</a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="price"
                header-align="center"
                align="center"
                min-width="100"
                label="不含税单价">
              </el-table-column>
              <el-table-column
                prop="taxPrice"
                header-align="center"
                align="center"
                label="含税单价">
              </el-table-column>
              <el-table-column
                prop="taxAmount"
                header-align="center"
                align="center"
                label="含税总价">
              </el-table-column>
              <el-table-column
                prop="taxRate"
                header-align="center"
                align="center"
                :formatter="formatPercent"
                label="税率">
              </el-table-column>
              <el-table-column
                prop="notes"
                header-align="center"
                align="center"
                label="备注">
              </el-table-column>
              <el-table-column
                fixed="right"
                header-align="center"
                align="center"
                width="80"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="addProductHandle(scope.row, false)">编辑</el-button>
<!--                  <el-button style="color: red" type="text" size="small" @click="deleteProductHandle(scope.row.detailId)">删除</el-button>-->
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin-top: 20px">
            <span>合计（含税）： {{totalAmount}}</span>
          </el-row>
<!--          <el-row style="text-align: center; margin-top: 10px;">-->
<!--            <el-button type="primary" icon="el-icon-plus" @click="addMaterial"></el-button>-->
<!--          </el-row>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onChose">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
      <!-- 新增物品 -->
      <Add v-show="addProductVisible" ref="comAddProduct" @addItem="addProductCallback"/>
      <!-- 文件预览 -->
      <preview-component v-if="previewVisible" ref="preview"/>
    </div>
</template>

<script>
  import { getOutsourceDetail, getOutsourceDetailByScheduleId } from '@/api/sale'
  import { getDictList } from '@/api/dict'
  import Add from './add-product'
  import ApproveComponent from '../common/approve-component'
  import PreviewComponent from '../common/preview-component'

export default {
    name: 'outsource-add-or-update',
    components: {
      PreviewComponent,
      ApproveComponent,
      Add
    },
    data () {
      return {
        id: 0,
        dataForm: {},
        dataRule: {
          payType: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
          commissionType: [{ required: true, message: '请选择委外类别', trigger: 'change' }]
        },
        optionsType: [],
        totalAmount: 0,
        addProductVisible: false,
        productDetails: [],
        prodProductionIds: [], // 排产ID的集合
        previewVisible: false
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      async init (id, prodProductionIds) {
        if (prodProductionIds) {
          this.prodProductionIds = prodProductionIds
        }
        this.productDetails = []
        this.dataForm = {
          payType: '1'
        }
        this.id = id || 0
        // 获取委外类别列表
        this.getType()
        // 详情
        if (!id) return
        if (this.prodProductionIds.length > 0) {
          await getOutsourceDetailByScheduleId({'prodProductionIds': this.prodProductionIds}).then(({data}) => {
            if (data && data.code === '200' && data.data) {
              this.productDetails = data.data
              if (this.productDetails && this.productDetails.length > 0) {
                this.productDetails.forEach((item) => {
                  item.detailId = Math.round(Math.random() * 1000000)
                })
                this.calTotal()
              }
            }
          })
        } else {
          await getOutsourceDetail(this.id).then(({data}) => {
            if (data && data.code === '200' && data.data) {
              this.dataForm = data.data
              this.productDetails = data.data.purCommissionDetails
              if (this.productDetails && this.productDetails.length > 0) {
                this.productDetails.forEach((item) => {
                  item.detailId = Math.round(Math.random() * 1000000)
                })
                this.calTotal()
              }
            }
          })
        }
      },
      // 获取类别
      getType () {
        getDictList({type: 'commission_type'}).then(({data}) => {
          if (data) {
            this.optionsType = data
          }
        })
      },
      validateField (type) {
        this.$refs.dataForm.validateField(type)
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let action = ''
            if (this.prodProductionIds.length > 0) {
              action = `/biz-service/purCommDetail/save`
            } else {
              action = `/biz-service/purCommDetail/${!this.id ? 'save' : 'update'}`
            }
            // 产品明细
            this.$http({
              url: this.$http.adornUrl(action),
              method: 'post',
              data: this.$http.adornData({
                ...this.dataForm,
                purCommissionDetails: this.productDetails,
                applierId: this.$store.state.user.id,
                orgId: this.$store.state.user.orgId
              })
            }).then(({data}) => {
              if (data && data.code === '200') {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.onChose()
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      addMaterial () {
        this.addProductVisible = true
        this.$nextTick(() => {
          this.$refs.comAddProduct.init()
        })
      },
      addProductHandle (row, disable) {
        this.addProductVisible = true
        this.$nextTick(() => {
          this.$refs.comAddProduct.init(row.detailId, disable, row)
        })
      },
      deleteProductHandle (detailId) {
        if (!detailId) return
        this.productDetails.splice(this.productDetails.findIndex((item) => item.detailId === detailId))
        this.calTotal()
      },
      addProductCallback (data) {
        if (!data) return
        this.addProductVisible = false
        let i = this.productDetails.findIndex((item) => item.detailId === data.detailId)
        if (i > -1) {
          this.productDetails.splice(i)
        }
        this.productDetails.push(data)
        this.calTotal()
      },
      calTotal () {
        let total = 0
        if (this.productDetails) {
          this.productDetails.forEach((item) => {
            total += item.taxAmount ? Number(item.taxAmount) : 0
          })
        }
        this.totalAmount = total
      },
      // 百分比
      formatPercent (row) {
        if (!row.taxRate) return ''
        let str = (Number(row.taxRate * 100)).toFixed(0)
        str += '%'
        return str
      },
      // 预览
      previewFile (fileName, url) {
        this.previewVisible = true
        this.$nextTick(() => {
          this.$refs.preview.init(fileName, url)
        })
      }
    }
  }
</script>

<style scoped>

</style>