|
|
@@ -0,0 +1,459 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <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="source">
|
|
|
+ <cus-component v-model="dataForm.source" :cus-id.sync="dataForm.source"></cus-component>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="产品图纸" prop="drawingIdList">
|
|
|
+ <draw-components v-model="dataForm.drawingIdList" :draw-ids="dataForm.drawingIdList" @change='receiverChange'></draw-components>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="所需文件资料" prop="docIdList">
|
|
|
+ <doc-components v-model="dataForm.docIdList" :doc-ids="dataForm.docIdList" @change='docSelectChange'/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="my-row">
|
|
|
+ <upload-component :title="'产品技术文件（多选）'" :accept="'*'" :file-obj-list="fileList" @uploadSuccess="uploadSuccess"/>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="my-row" style="margin-top: 20px">
|
|
|
+ <el-form-item label="备注" prop="notes">
|
|
|
+ <el-input type="textarea" v-model="dataForm.notes" :disabled="display"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="my-row">
|
|
|
+ <el-form-item label="是否组合产品" prop="displayProductList">
|
|
|
+ <el-switch
|
|
|
+ v-model="dataForm.displayProductList"
|
|
|
+ :disabled="display"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ active-text="是"
|
|
|
+ inactive-text="否">
|
|
|
+ </el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row v-if="dataForm.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-row>
|
|
|
+ <div class="title"><span style="color: red">*</span> 产品配料清单</div>
|
|
|
+ <el-table
|
|
|
+ :data="materialList"
|
|
|
+ border
|
|
|
+ style="width: 100%;">
|
|
|
+ <el-table-column
|
|
|
+ label="序号"
|
|
|
+ type="index"
|
|
|
+ width="50"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="materialName"
|
|
|
+ header-align="center"
|
|
|
+ align="center"
|
|
|
+ label="物品名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="specifications"
|
|
|
+ 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="0" style="width: 140px;"/>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="unitName"
|
|
|
+ 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>
|
|
|
+ <el-row style="text-align: center; margin-top: 10px;">
|
|
|
+ <el-button v-show="!display" type="primary" icon="el-icon-plus" @click="addMaterial"></el-button>
|
|
|
+ </el-row>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import templateChose from '../product/template-chose'
|
|
|
+ import templateChoseMaterial from '../product/template-chose-material'
|
|
|
+ import { getDictList } from '@/api/dict'
|
|
|
+ import { getProductDetail } from '@/api/product'
|
|
|
+ import UploadComponent from '../common/upload-component'
|
|
|
+ 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},
|
|
|
+ computed: {
|
|
|
+ orgId: {
|
|
|
+ get () { return this.$store.state.user.orgId }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'dataForm.isCompose' (value) {
|
|
|
+ this.dataForm.displayProductList = value === '1'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ productListVisible: false,
|
|
|
+ materialListVisible: false,
|
|
|
+ visible: false,
|
|
|
+ display: false,
|
|
|
+ optionsType: [],
|
|
|
+ // optionsTech: [],
|
|
|
+ fileList: [],
|
|
|
+ dataList: [],
|
|
|
+ id: 0,
|
|
|
+ productDetails: [],
|
|
|
+ materialList: [],
|
|
|
+ dataForm: {
|
|
|
+ displayProductList: false
|
|
|
+ },
|
|
|
+ dataRule: {
|
|
|
+ productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
|
|
|
+ productSpec: [{ required: true, message: '产品规格不能为空', trigger: 'blur' }],
|
|
|
+ productType: [{ required: true, message: '产品类别不能为空', trigger: 'change' }],
|
|
|
+ docIdList: [{ required: true, message: '所需文件资料不能为空', trigger: 'change' }],
|
|
|
+ source: [{ required: true, message: '产品来源不能为空', trigger: 'change' }],
|
|
|
+ drawingIdList: [{ required: true, message: '产品图纸不能为空', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ stepList: [],
|
|
|
+ logList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChose () {
|
|
|
+ this.$emit('onChose')
|
|
|
+ },
|
|
|
+ async init (id, display) {
|
|
|
+ this.fileList = []
|
|
|
+ this.stepList = []
|
|
|
+ this.logList = []
|
|
|
+ this.dataForm = {}
|
|
|
+ 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.attachList) {
|
|
|
+ data.data.attachList.forEach((item) => {
|
|
|
+ this.fileList.push({
|
|
|
+ name: item.fileName,
|
|
|
+ url: item.url,
|
|
|
+ id: item.url
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 流程图展示
|
|
|
+ if (data.data.workFlowBusinessExt) {
|
|
|
+ dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
|
|
|
+ dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
|
|
|
+ }
|
|
|
+ // 组合小产品
|
|
|
+ data.data.composeProductMaterialList.forEach((item) => {
|
|
|
+ this.productDetails.push(item)
|
|
|
+ })
|
|
|
+ // 产品配料清单
|
|
|
+ data.data.productMaterialList.forEach((item) => {
|
|
|
+ this.materialList.push(item)
|
|
|
+ })
|
|
|
+ // 产品来源
|
|
|
+ if (data.data.source) {
|
|
|
+ this.optionsSource = [{
|
|
|
+ code: data.data.source,
|
|
|
+ value: data.data.sourceName
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ // 产品工艺
|
|
|
+ if (data.data.techId) {
|
|
|
+ this.optionsTech = [{
|
|
|
+ code: data.data.techId,
|
|
|
+ value: data.data.techName
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ // 产品图纸
|
|
|
+ if (data.data.proDrawings) {
|
|
|
+ this.dataForm.drawingIdList = []
|
|
|
+ data.data.proDrawings.forEach((item) => {
|
|
|
+ if (item.attachList) {
|
|
|
+ item.attachList.forEach((item1) => {
|
|
|
+ this.fileList.push({
|
|
|
+ name: item1.fileName,
|
|
|
+ url: item1.url,
|
|
|
+ id: item1.url
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this.optionsDraw.push({
|
|
|
+ // code: item.drawingId,
|
|
|
+ // value: item.drawingName
|
|
|
+ // })
|
|
|
+ this.dataForm.drawingIdList.push(item.drawingId)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadSuccess (fileList) {
|
|
|
+ this.fileList = fileList
|
|
|
+ },
|
|
|
+ // 添加组合产品
|
|
|
+ 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({
|
|
|
+ productId: 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({
|
|
|
+ materialId: item.materialId,
|
|
|
+ materialName: item.materialName,
|
|
|
+ specifications: item.specifications,
|
|
|
+ cnt: 0,
|
|
|
+ unitName: item.unitName,
|
|
|
+ notes: item.notes
|
|
|
+ })
|
|
|
+ },
|
|
|
+ validateField (type) {
|
|
|
+ this.$refs.dataForm.validateField(type)
|
|
|
+ },
|
|
|
+ // 表单提交
|
|
|
+ dataFormSubmit () {
|
|
|
+ this.$refs['dataForm'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // 组合小产品
|
|
|
+ this.dataForm.composeProductMaterialList = []
|
|
|
+ const b1 = this.dataForm.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({
|
|
|
+ cnt: item.cnt,
|
|
|
+ materialId: item.productId,
|
|
|
+ notes: item.notes
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 产品配料清单
|
|
|
+ this.dataForm.productMaterialList = []
|
|
|
+ if (this.materialList.length > 0) {
|
|
|
+ this.materialList.forEach((item) => {
|
|
|
+ this.dataForm.productMaterialList.push({
|
|
|
+ cnt: item.cnt,
|
|
|
+ materialId: item.materialId,
|
|
|
+ notes: item.notes
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 产品技术文件
|
|
|
+ let fList = this.fileList
|
|
|
+ if (fList.length > 0) {
|
|
|
+ this.dataForm.attachList = []
|
|
|
+ for (let i = 0; i < fList.length; i++) {
|
|
|
+ this.dataForm.attachList.push({
|
|
|
+ fileName: fList[i].name,
|
|
|
+ url: fList[i].url
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error('请上传文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl(`/biz-service/product/save`),
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ receiverChange (val) {
|
|
|
+ this.dataForm.drawingIdList = val
|
|
|
+ },
|
|
|
+ docSelectChange (val) {
|
|
|
+ console.log(val)
|
|
|
+ this.dataForm.docIdList = val
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
chris