X-web/src/views/modules/cus/quoted-price.vue

<!-- 初始报价、精准报价 -->
<template>
  <div>
    <div class="my-title">{{ title }}</div>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="160px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="沟通信息" prop="coId">
            <el-select
              v-model="dataForm.coId"
              placeholder="请选择"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in coOption"
                :key="item.coId"
                :label="item.coCode + ' (' + item.customerName + ')'"
                :value="item.coId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="dataForm.projectName"
              placeholder="项目名称"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类别" prop="type">
            <el-select
              v-model="dataForm.type"
              placeholder="请选择"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in productTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="备注">
            <el-input
              v-model="dataForm.remark"
              type="textarea"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="关联BOM物料清单" prop="productId">
            <el-select
              v-model="dataForm.productId"
              remote
              filterable
              clearable
              :remote-method="productIdQueryHandle"
              :loading="productSearchLoading"
              @change="productIdChangeHandle"
              placeholder="请选择"
              style="width: 100%"
              disabled
            >
              <el-option
                v-for="item in productIdOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <div class="title">BOM物料明细报价</div>
        <el-row>
          <el-table :data="dataForm.quotedPriceProductList" border style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="productName"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="物料名称"
            >
            </el-table-column>
            <el-table-column
              prop="productSpec"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="物料规格"
            >
            </el-table-column>
            <el-table-column
              prop="mapNumber"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="主图号"
            >
            </el-table-column>
            <el-table-column
              prop="materials"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="材料"
            >
            </el-table-column>
            <el-table-column
              prop="cnt"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="单套数量"
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="单位"
            >
            </el-table-column>
            <el-table-column
              prop="size"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="物料尺寸"
            >
            </el-table-column>
            <el-table-column
              prop="developedSize"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="展开尺寸"
            >
            </el-table-column>
            <el-table-column
              prop="surfaceTreatment"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="表面处理"
            >
            </el-table-column>
            <el-table-column
              prop="notes"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="备注"
            >
            </el-table-column>
            <!-- 初次报价 -->
            <div v-if="type === 'first'">
              <el-table-column
                prop="notes"
                header-align="center"
                align="center"
                min-width="160px"
                fixed="right"
                label="原材料费"
              >
                <template slot-scope="scope">
                  <el-input-number size="mini" :precision=2 :controls=false placeholder="请输入" v-model="scope.row.materialPrice" @change="inputNumChangeHandle"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="notes"
                header-align="center"
                align="center"
                min-width="160px"
                fixed="right"
                label="生产加工费"
              >
                <template slot-scope="scope">
                  <el-input-number size="mini" :precision=2 :controls=false placeholder="请输入" v-model="scope.row.processPrice" @change="inputNumChangeHandle"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="notes"
                header-align="center"
                align="center"
                min-width="160px"
                fixed="right"
                label="热表处理费"
              >
                <template slot-scope="scope">
                  <el-input-number size="mini" :precision=2 :controls=false placeholder="请输入" v-model="scope.row.handlePrice" @change="inputNumChangeHandle"></el-input-number>
                </template>
              </el-table-column>
            </div>
          </el-table>
        </el-row>
        <div v-if="type === 'first'" style="margin: 25px 0 0 0">
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item label="小计">
                <el-input-number v-model="dataForm.materialCost" disabled :precision=2 :controls=false></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item label="模具费">
                <el-input-number v-model="dataForm.mouldPrice" @change="inputNumChangeHandle" :precision=2 :controls=false placeholder="请输入"></el-input-number>
              </el-form-item>
            </el-col>
             </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item label="管理费(%)">
                <el-input-number v-model="dataForm.managePrice" @change="inputNumChangeHandle" :precision=0 :controls=false placeholder="请输入"></el-input-number>
              </el-form-item>
            </el-col>
             </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item label="税率(%)">
                <el-input-number  v-model="dataForm.ratePrice" @change="inputNumChangeHandle" :precision=0 :controls=false></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="16">
              <el-form-item label="合计">
                <el-input-number v-model="dataForm.totalPrice" disabled :precision=2 :controls=false></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div>
        <div class="title"><span style="color: red">* </span>任务工单派发</div>
        <el-row>
          <el-table :data="dataForm.workInfoList" border style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="taskType"
              header-align="center"
              align="center"
              min-width="100"
              width="120"
              label="工单类型"
            >
              <template slot-scope="scope">
                <span>{{
                  taskTypeOption.findIndex(
                    (t) => t.value == scope.row.taskType
                  ) > -1
                    ? taskTypeOption.find((t) => t.value == scope.row.taskType)
                        .label
                    : ""
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="taskName"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="工单名称"
            >
            </el-table-column>
            <el-table-column
              prop="ranks"
              header-align="center"
              align="center"
              width="120"
              label="级别"
            >
              <template slot-scope="scope">
                <span>{{
                  rankTypeOption.findIndex((t) => t.value == scope.row.ranks) >
                  -1
                    ? rankTypeOption.find((t) => t.value == scope.row.ranks)
                        .label
                    : ""
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="content"
              header-align="center"
              align="center"
              min-width="100"
              label="工单内容"
              :show-tooltip-when-overflow="true"
            >
            </el-table-column>
            <el-table-column
              prop="receiver"
              header-align="center"
              align="center"
              width="150"
              label="任务接收人"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.receiverName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="attachListVo"
              header-align="center"
              align="center"
              width="150"
              label="任务附件"
            >
              <template slot-scope="scope">
                <el-button
                  :disabled="
                    !scope.row.attachList || scope.row.attachList.length === 0
                  "
                  type="text"
                  size="small"
                  @click="attachDetails(scope.row.attachList)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="notes"
              header-align="center"
              align="center"
              :show-tooltip-when-overflow="true"
              label="备注"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="100"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="updateWorderHandle(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  style="color: red"
                  type="text"
                  size="small"
                  @click="removeWorkInfoItem(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row style="text-align: center; margin-top: 10px">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="inBound"
            disabled
          ></el-button>
        </el-row>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <worder-add-or-update-dialog
      v-if="worderVisible"
      ref="worder"
      @submit="addWorderItem"
    />
    <attach-detail-dialog ref="attachDetail" @onChose="onChose" />
  </div>
</template>

<script>
import { getCoCode } from '@/api/cus'
import { getProductList, getProductAllDetail } from '@/api/product'
import { getDetail } from '@/api/quoted'
import {
  productTypeOption,
  taskTypeOption,
  rankTypeOption
} from '@/utils/enums'
import WorderAddOrUpdateDialog from '../worder/add-or-update-dialog'
import AttachDetailDialog from '../common/attach-detail-dialog'
export default {
  name: 'quoted-add-or-update',
  components: { WorderAddOrUpdateDialog, AttachDetailDialog },
  props: {},
  data () {
    return {
      id: 0,
      type: '',
      title: '',
      worderVisible: false,
      coOption: [], // 沟通编码下拉数据
      productTypeOption: productTypeOption,
      taskTypeOption: taskTypeOption,
      rankTypeOption: rankTypeOption,
      productIdOption: [], // 物料下拉数据
      productId: '', // 当前选择的物料Id
      productList: [], // 物料table
      productSearchLoading: false,
      dataForm: {
        materialCost: 0,
        quotedPriceProductList: [], // 报价物料清单
        workInfoList: []
      },
      dataRule: {
        coId: [
          { required: true, message: '请选择沟通信息', trigger: 'change' }
        ],
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择项目类别', trigger: 'change' }
        ],
        productId: [
          {
            required: true,
            message: '请选择关联的物料清单',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {},
  computed: {},
  created () {

  },
  mounted () {},
  activated () {},
  methods: {
    async init (id, type) {
      this.id = id || 0
      this.type = type
      this.setTitle(type)
      await this.getCoCode()
      await this.getProductList()
      if (this.id) {
        this.getDetail(this.id)
      }
    },
    onChose () {
      this.worderVisible = false
      this.$emit('onChose')
    },
    setTitle (type) {
      if (type === 'first') {
        this.title = '初次报价'
      } else if (type === 'second') {
        this.title = '精准报价'
      }
    },
    getDetail (priceId) {
      getDetail(priceId).then(({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = data.data
          if (this.dataForm.managePrice) {
            this.dataForm.managePrice = this.dataForm.managePrice * 100
          }
          if (this.dataForm.ratePrice) {
            this.dataForm.ratePrice = this.dataForm.ratePrice * 100
          }
          if (this.dataForm.productId) {
            this.productIdChangeHandle(this.dataForm.productId)
          }
        }
      })
    },
    getCoCode () {
      getCoCode().then(({ data }) => {
        if (data && data.code === '200') {
          this.coOption = data.data
        }
      })
    },
    async getProductList (productName) {
      let params = {
        current: 1,
        size: 20,
        productName: productName
      }
      await getProductList(params).then(({ data }) => {
        if (data && data.code === '200') {
          this.productIdOption = []
          data.data.records.forEach((item) => {
            this.productIdOption.push({
              label: item.productName,
              value: item.productId
            })
          })
        }
      })
    },
    async productIdQueryHandle (queryVal) {
      this.productSearchLoading = true
      await this.getProductList(queryVal)
      this.productSearchLoading = false
    },
    productIdChangeHandle (val) {
      if (val) {
        getProductAllDetail(val).then(({ data }) => {
          if (data && data.code === '200') {
            this.productList = data.data
            if (this.dataForm.quotedPriceProductList == null || this.dataForm.quotedPriceProductList.length === 0) {
              this.productList.forEach((item) => {
                this.dataForm.quotedPriceProductList.push({
                  productId: item.productId
                })
                item.id = this.dataForm.quotedPriceProductList.find(t => t.productId === item.productId).id
              })
            } else {
              this.dataForm.quotedPriceProductList.forEach(item => {
                let tempItem = this.productList.find(t => t.productId === item.productId)
                if (tempItem) {
                  item.productName = tempItem.productName
                  item.productSpec = tempItem.productSpec
                  item.mapNumber = tempItem.mapNumber
                  item.materials = tempItem.materials
                  item.cnt = tempItem.cnt
                  item.unit = tempItem.unit
                  item.size = tempItem.size
                  item.developedSize = tempItem.developedSize
                  item.surfaceTreatment = tempItem.surfaceTreatment
                  item.notes = tempItem.notes
                }
              })
            }

            // 触发自动计算
            this.inputNumChangeHandle()
          }
        })
      } else {
        this.productList = []
      }
    },
    removeWorkInfoItem (index) {
      this.dataForm.workInfoList.splice(index, 1)
    },
    inBound () {
      this.worderVisible = true
      this.$nextTick(() => {
        this.$refs.worder.init(1)
      })
    },
    addWorderItem (item) {
      if (!item.recordId) {
        item.recordId = Math.round(Math.random() * 1000000)
      }
      if (
        this.dataForm.workInfoList.findIndex(
          (item1) => item1.recordId === item.recordId
        ) === -1
      ) {
        this.dataForm.workInfoList.push({
          ...item
        })
      }
    },
    updateWorderHandle (row) {
      this.worderVisible = true
      this.$nextTick(() => {
        this.$refs.worder.init(1, row)
      })
    },
    attachDetails (attachList) {
      this.$refs.attachDetail.init(attachList)
    },
    inputNumChangeHandle (currentValue, oldValue) {
      // 计算报价小计
      let tempMaterialCost = 0
      this.dataForm.quotedPriceProductList.forEach(item => {
        tempMaterialCost += item.handlePrice + item.materialPrice + item.processPrice
      })
      this.dataForm.materialCost = tempMaterialCost

      // 计算总价
      this.dataForm.totalPrice = (tempMaterialCost + this.dataForm.mouldPrice) * (1 + this.dataForm.managePrice / 100) * (1 + this.dataForm.ratePrice / 100)
    },
    dataFormSubmit () {
      if (this.type === 'first') {
        this.first()
      }
    },
    // 初次报价
    first () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let param = {
            priceId: this.dataForm.priceId,
            remark: this.dataForm.remark,
            managePrice: this.dataForm.managePrice / 100,
            mouldPrice: this.dataForm.mouldPrice,
            ratePrice: this.dataForm.ratePrice / 100,
            materialCost: this.dataForm.materialCost,
            totalPrice: this.dataForm.totalPrice,
            quotedPriceProductFirstParamsList: this.dataForm.quotedPriceProductList.map(item => {
              let temp = {
                id: item.id,
                priceId: this.id,
                productId: item.productId,
                materialPrice: item.materialPrice,
                processPrice: item.processPrice,
                handlePrice: item.handlePrice
              }
              return temp
            })
          }

          this.$http({
            url: this.$http.adornUrl(`/biz-service/quoted/updateFirst`),
            method: 'post',
            data: this.$http.adornData({ ...param, orgId: this.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)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding: 10px 0;
}

/deep/ .my_input > .el-input__inner{
  text-align: center;
}
</style>