X-web/src/views/modules/tech/product-add-or-update.vue

<template>
  <div>
    <!-- <el-dialog
        :title="!id ? '新增': display ? '详情' : '修改'"
        width="70%"
        :close-on-click-modal="false"
        :visible.sync="visible"> -->
    <div class="my-title">{{ !id ? '新增' : display ? '详情' : '修改' }}</div>
    <!-- 工作流 -->
    <div v-show="display && dataForm.workFlowBusinessExt">
      <el-steps
        :active="dataForm.workFlowBusinessExt && dataForm.workFlowBusinessExt.workFlowProcessStepList ? dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2 : 0"
        align-center style="margin-bottom: 20px">
        <template v-for="(item, i) in stepList">
          <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
        </template>
      </el-steps>
      <el-collapse style="margin-bottom: 20px">
        <el-collapse-item>
          <template slot="title">
            <span style="color: red">审批日志（展开查看更多）：</span>
          </template>
          <template v-for="(item, i) in logList">
            <div>{{+ + i }}：{{ item.approverName }} {{ item.createTime }} {{ item.approvalValue }}</div>
          </template>
        </el-collapse-item>
      </el-collapse>
    </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="productName">
            <el-input v-model="dataForm.productName" :disabled="display" placeholder="物料名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料规格" prop="productSpec">
            <el-input v-model="dataForm.productSpec" :disabled="display" placeholder="物料规格"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料类别" prop="productType">
            <el-select v-model="dataForm.productType" :disabled="display" 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>
      <el-row class="my-row">
        <el-col :span="8">
          <el-form-item label="材料" prop="materials">
            <el-input v-model="dataForm.materials" :disabled="display" placeholder="材料"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料尺寸" prop="size">
            <el-input v-model="dataForm.size" :disabled="display" placeholder="物料尺寸"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="展开尺寸" prop="developedSize">
            <el-input v-model="dataForm.developedSize" :disabled="display" placeholder="展开尺寸"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="my-row">
        <el-col :span="8">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="dataForm.unit" :disabled="display" placeholder="单位"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单套数量" prop="cnt">
            <el-input v-model="dataForm.cnt" :disabled="display" placeholder="单套数量"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主图号" prop="mapNumber">
            <el-input v-model="dataForm.mapNumber" :disabled="display" placeholder="主图号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="表面处理" prop="surfaceTreatment">
            <el-input v-model="dataForm.surfaceTreatment" :disabled="display" placeholder="" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="备注" prop="notes">
            <el-input v-model="dataForm.notes" :disabled="display" placeholder="" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="my-row">
        <el-col :span="8">
          <el-form-item label="简图" prop="attachList2">
            <upload-component :accept="'.jpg,.jpeg,.png'" v-model="dataForm.attachList2" />
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="4">
          <el-form-item label="技术资料附件" prop="attachList">
            <upload-component :accept="'*'" v-model="dataForm.attachList" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="title"><span style="color: red">*</span> 关联图纸</div>
        <el-table :data="drawingList" border style="width: 100%;">
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column prop="drawingName" header-align="center" align="center" label="图纸名称">
          </el-table-column>
          <el-table-column prop="drawingNo" header-align="center" align="center" label="图号">
          </el-table-column>
          <el-table-column prop="source" header-align="center" align="center" label="来源">
          </el-table-column>
          <el-table-column prop="notes" header-align="center" align="center" label="备注">
          </el-table-column>
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removeDrawingItem(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="text-align: center; margin-top: 10px;">
          <el-button v-show="!display" type="primary" icon="el-icon-plus" @click="addDrawingList"></el-button>
        </el-row>
      </el-row>
      <el-row class="my-row">
        <el-form-item label="是否组合物料" prop="displayProductList">
          <el-switch v-model="displayProductList" active-color="#13ce66" inactive-color="#ff4949" active-text="是"
            inactive-text="否">
          </el-switch>
        </el-form-item>
      </el-row>
      <el-row v-if="displayProductList">
        <div class="title"><span style="color: red">*</span> 组合小物料</div>
        <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="productName" header-align="center" align="center" label="物料名称">
          </el-table-column>
          <el-table-column prop="productSpec" header-align="center" align="center" label="规格">
          </el-table-column>
          <el-table-column prop="cnt" header-align="center" align="center" label="数量" width="170">
            <template slot-scope="scope">
              <el-input-number v-model="scope.row.cnt" :disabled="display" :min="1" style="width: 140px;" />
            </template>
          </el-table-column>
          <el-table-column prop="notes" header-align="center" align="center" label="备注">
          </el-table-column>
        </el-table>
        <el-row style="text-align: center; margin-top: 10px;">
          <el-button v-show="!display" type="primary" icon="el-icon-plus" @click="addProduct"></el-button>
        </el-row>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">取消</el-button>
      <el-button v-if="!display" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <!-- </el-dialog> -->
    <template-chose v-if="productListVisible" ref="productList" @addItems="addProductItems" />
    <templateChoseMaterial v-if="materialListVisible" ref="materialList" @addItems="addMaterialItems" />
    <template-draw-choose v-if="drawListVisible" ref="drawList" @addItems="addDrawItems" />
  </div>
</template>

<script>
import templateChose from '../product/template-chose'
import templateChoseMaterial from '../product/template-chose-material'
import templateDrawChoose from './draw-template-choose'
import { getDictList } from '@/api/dict'
import { getProductDetail } from '@/api/product'
import UploadComponent from '../common/upload-component-v2'
import { dealStepData, dealStepLogs } from '@/api/util'
import CusComponent from '../common/cus-component'
import DrawComponents from '../common/draw-components'
import DocComponents from '../common/doc-components'

export default {
  name: 'product-add-or-update',
  components: { DocComponents, DrawComponents, CusComponent, UploadComponent, templateChose, templateChoseMaterial, templateDrawChoose },
  computed: {
    orgId: {
      get () { return this.$store.state.user.orgId }
    }
  },
  // watch: {
  //   'dataForm.isCompose' (value) {
  //     this.dataForm.displayProductList = value === '1'
  //   }
  // },
  data () {
    return {
      productListVisible: false,
      materialListVisible: false,
      drawListVisible: false,
      visible: false,
      display: false,
      optionsType: [],
      // optionsTech: [],
      fileList: [],
      listingList: [],
      dataList: [],
      id: 0,
      productDetails: [],
      materialList: [],
      drawingList: [],
      displayProductList: false,
      dataForm: {
        drawingList: []
      },
      dataRule: {
        productName: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
        productSpec: [{ required: true, message: '请输入物料规格', trigger: 'blur' }],
        productType: [{ required: true, message: '请选择物料类别', trigger: 'change' }],
        materials: [{ required: true, message: '请输入材料', trigger: 'blur' }],
        size: [{ required: true, message: '请输入物料尺寸', trigger: 'blur' }],
        developedSize: [{ required: true, message: '请输入展开尺寸', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        cnt: [{ required: true, message: '请输入单套数量', trigger: 'blur' }],
        mapNumber: [{ required: true, message: '请输入主图号', trigger: 'blur' }]
      },
      stepList: [],
      logList: []
    }
  },
  methods: {
    onChose () {
      this.$emit('onChose')
    },
    async init (id, display) {
      this.fileList = []
      this.listingList = []
      this.stepList = []
      this.logList = []
      this.dataForm = {
        drawList: []
      }
      this.productDetails = []
      this.materialList = []
      // this.optionsTech = []
      // this.optionsDraw = []
      this.visible = true
      this.id = id || 0
      this.display = display
      // 获取物料类别
      await getDictList({ type: 'product_type' }).then(({ data }) => {
        if (data) {
          this.optionsType = data
        }
      })
      // 物料工艺
      if (!id) return
      await getProductDetail(this.id).then(({ data }) => {
        if (data && data.code === '200') {
          this.dataForm = data.data

          if (data.data.docs) {
            let docIdList = []
            data.data.docs.forEach((item) => {
              docIdList.push(item.docId)
            })
            this.dataForm.docIdList = docIdList
          }
          if (data.data.proDrawings) {
            let idList = []
            data.data.proDrawings.forEach((item) => {
              idList.push(item.drawingId)
            })
            this.dataForm.drawingIdList = idList
          }

          // 流程图展示
          if (data.data.workFlowBusinessExt) {
            dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
            dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
          }
          // 组合小物料
          if (data.data.productMaterialList) {
            data.data.productMaterialList.forEach((item) => {
              this.productDetails.push({
                ...item,
                productSpec: item.specifications
              })
            })
            this.displayProductList = true
          }

          // 物料图纸
          this.drawingList = data.data.proDrawings
        }
      })
    },
    uploadSuccess (fileList) {
      this.fileList = fileList
    },
    uploadSuccess2 (fileList2) {
      this.listingList = fileList2
    },
    // 添加组合物料
    addProduct () {
      this.productListVisible = true
      this.$nextTick(() => {
        this.$refs.productList.init()
      })
    },
    addProductItems (items) {
      this.productDetails = []
      items.forEach((item) => {
        this.addProductItem(item)
      })
    },
    addProductItem (item) {
      this.productDetails.push({
        proProductId: item.productId,
        productName: item.productName,
        productSpec: item.productSpec,
        cnt: 1,
        notes: item.notes
      })
    },
    addMaterial () {
      this.materialListVisible = true
      this.$nextTick(() => {
        this.$refs.materialList.init()
      })
    },
    addMaterialItems (items) {
      this.materialList = []
      items.forEach((item) => {
        this.addMaterialItem(item)
      })
    },
    addMaterialItem (item) {
      this.materialList.push({
        ...item,
        cnt: 0
      })
    },
    validateField (type) {
      this.$refs.dataForm.validateField(type)
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 组合小物料
          this.dataForm.composeProductMaterialList = []
          const b1 = this.displayProductList
          this.dataForm.isCompose = b1 === true ? '1' : '0'
          if (this.dataForm.isCompose === '1' && this.productDetails.length > 0) {
            this.productDetails.forEach((item) => {
              this.dataForm.composeProductMaterialList.push({
                ...item
              })
            })
          }
          if (this.drawingList.length <= 0) {
            this.$message.error('请选择关联图纸')
            return
          }
          this.dataForm.drawingList = this.drawingList

          this.$http({
            url: !this.id ? this.$http.adornUrl(`/biz-service/product/save`) : this.$http.adornUrl(`/biz-service/product/update`),
            method: 'post',
            data: this.$http.adornData({ ...this.dataForm, 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)
            }
          })
        }
      })
    },
    docSelectChange (val) {
      // console.log(val)
      this.dataForm.docIdList = val
    },
    // 添加关联图纸
    addDrawingList () {
      this.drawListVisible = true
      this.$nextTick(() => {
        this.$refs.drawList.init()
      })
    },
    addDrawItems (items) {
      items.forEach((item) => {
        this.addDrawItem(item)
      })
    },
    addDrawItem (item) {
      this.drawingList.push({
        drawingId: item.drawingId,
        drawingName: item.drawingName,
        drawingNo: item.drawingNo,
        source: item.source,
        notes: item.notes
      })
    },
    removeDrawingItem (index) {
      this.drawingList.splice(index, 1)
    }
  }
}
</script>

<style scoped></style>