BOM清单，调整参数

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

@@ -102,13 +102,13 @@
           </el-form-item>
         </el-col>
       </el-row>
-<!--      <el-row>-->
-<!--        <el-col>-->
-<!--          <el-form-item label="热处理" prop="heatTreatment">-->
-<!--            <el-input v-model="dataForm.heatTreatment" :disabled="display" placeholder="" type="textarea"></el-input>-->
-<!--          </el-form-item>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
+      <!--      <el-row>-->
+      <!--        <el-col>-->
+      <!--          <el-form-item label="热处理" prop="heatTreatment">-->
+      <!--            <el-input v-model="dataForm.heatTreatment" :disabled="display" placeholder="" type="textarea"></el-input>-->
+      <!--          </el-form-item>-->
+      <!--        </el-col>-->
+      <!--      </el-row>-->
       <el-row>
         <el-col :span="8">
           <el-form-item label="关联物料" prop="materialCode">
@@ -151,13 +151,10 @@
           </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="操作">
+          <el-table-column fixed="right" header-align="center" align="center" width="80" label="操作">
             <template slot-scope="scope">
-              <el-button style="color: red" type="text" size="small" @click="removeDrawingItem(scope.$index)">移除</el-button>
+              <el-button style="color: red" type="text" size="small"
+                @click="removeDrawingItem(scope.$index)">移除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -175,27 +172,37 @@
       <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" min-width="100" :show-tooltip-when-overflow="true">
+          <el-table-column label="序号" type="index" width="50" align="center" min-width="100"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column prop="productName" header-align="left" align="left" label="物料名称" min-width="100" :show-tooltip-when-overflow="true">
+          <el-table-column prop="mapNumber" header-align="left" align="left" label="主图号" min-width="100"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column prop="productSpec" header-align="left" align="left" label="规格" min-width="100" :show-tooltip-when-overflow="true">
+          <el-table-column prop="productName" header-align="left" align="left" label="物料名称" min-width="100"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column prop="cnt" header-align="left" align="left" label="数量"  min-width="60" :show-tooltip-when-overflow="true">
-<!--            <template slot-scope="scope">-->
-<!--              <el-input-number v-model="scope.row.cnt" :disabled="display" :min="1" style="width: 140px;" />-->
-<!--            </template>-->
+          <el-table-column prop="productSpec" header-align="left" align="left" label="物料规格" min-width="100"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column prop="notes" header-align="left" align="left" label="备注" min-width="200" :show-tooltip-when-overflow="true">
+          <el-table-column prop="cnt" header-align="left" align="left" label="单套数量" min-width="60"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column
-            fixed="right"
-            header-align="center"
-            align="left"
-            width="80"
-            label="操作">
+          <el-table-column prop="unit" header-align="left" align="left" label="单位" min-width="60"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="materials" header-align="left" align="left" label="材料" min-width="100"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="size" header-align="left" align="left" label="物料尺寸" min-width="100"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="notes" header-align="left" align="left" label="备注" min-width="200"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column fixed="right" header-align="center" align="left" width="80" label="操作">
             <template slot-scope="scope">
-              <el-button style="color: red" type="text" size="small" @click="deleteProductHandle(scope.row.productId)">移除</el-button>
+              <el-button style="color: red" type="text" size="small"
+                @click="deleteProductHandle(scope.row.productId)">移除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -211,7 +218,7 @@
     <!-- </el-dialog> -->
     <template-chose v-if="productListVisible" ref="productList" @addItems="addProductItems" />
     <template-draw-choose v-if="drawListVisible" ref="drawList" @addItems="addDrawItems" />
-    <stock-dialog v-if="materialCompVisible" ref="stockList" @addItem="addStockItem"/>
+    <stock-dialog v-if="materialCompVisible" ref="stockList" @addItem="addStockItem" />
   </div>
 </template>
 
@@ -233,10 +240,10 @@ export default {
   components: { DocComponents, DrawComponents, CusComponent, UploadComponent, templateChose, templateChoseMaterial, templateDrawChoose, stockDialog },
   computed: {
     orgId: {
-      get () { return this.$store.state.user.orgId }
+      get() { return this.$store.state.user.orgId }
     }
   },
-  data () {
+  data() {
     return {
       productListVisible: false,
       drawListVisible: false,
@@ -245,8 +252,8 @@ export default {
       display: false,
       optionsType: [],
       optionsImportance: [
-        {code: '1', value: '是'},
-        {code: '0', value: '否'}
+        { code: '1', value: '是' },
+        { code: '0', value: '否' }
       ],
       fileList: [],
       listingList: [],
@@ -280,10 +287,10 @@ export default {
     }
   },
   methods: {
-    onChose () {
+    onChose() {
       this.$emit('onChose')
     },
-    async init (id, display) {
+    async init(id, display) {
       this.fileList = []
       this.listingList = []
       this.stepList = []
@@ -354,23 +361,23 @@ export default {
         }
       })
     },
-    uploadSuccess (fileList) {
+    uploadSuccess(fileList) {
       this.fileList = fileList
     },
     // 添加组合物料
-    addProduct () {
+    addProduct() {
       this.productListVisible = true
       this.$nextTick(() => {
         this.$refs.productList.init()
       })
     },
-    addProductItems (items) {
+    addProductItems(items) {
       // this.productDetails = []
       items.forEach((item) => {
         this.addProductItem(item)
       })
     },
-    addProductItem (item) {
+    addProductItem(item) {
       let productId = item.productId
       if (!this.productDetails.some(item => item.productId === productId)) {
         this.productDetails.push({
@@ -378,14 +385,14 @@ export default {
         })
       }
     },
-    deleteProductHandle (productId) {
+    deleteProductHandle(productId) {
       this.productDetails.splice(this.productDetails.findIndex((item) => item.productId === productId), 1)
     },
-    validateField (type) {
+    validateField(type) {
       this.$refs.dataForm.validateField(type)
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           // 对应物料
@@ -427,19 +434,19 @@ export default {
         }
       })
     },
-// 添加关联图纸
-    addDrawingList () {
+    // 添加关联图纸
+    addDrawingList() {
       this.drawListVisible = true
       this.$nextTick(() => {
         this.$refs.drawList.init()
       })
     },
-    addDrawItems (items) {
+    addDrawItems(items) {
       items.forEach((item) => {
         this.addDrawItem(item)
       })
     },
-    addDrawItem (item) {
+    addDrawItem(item) {
       this.drawingList.push({
         drawingId: item.drawingId,
         drawingName: item.drawingName,
@@ -448,18 +455,18 @@ export default {
         notes: item.notes
       })
     },
-    removeDrawingItem (index) {
+    removeDrawingItem(index) {
       this.drawingList.splice(index, 1)
     },
     // 选择物料
-    selectMaterial () {
+    selectMaterial() {
       this.materialCompVisible = true
       this.$nextTick(() => {
         this.$refs.stockList.init()
       })
     },
     // 添加物料到 dataForm
-    addStockItem (item) {
+    addStockItem(item) {
       this.material = item
     }
   }

src/views/modules/tech/product-detail.vue

@@ -20,36 +20,36 @@
               <span style="color: red">审批日志（展开查看更多）：</span>
             </template>
             <template v-for="(item, i) in logList">
-              <div>{{++i}}：{{item.approverName}}  {{item.createTime}}  {{item.approvalValue}}</div>
+              <div>{{+ + i }}：{{ item.approverName }} {{ item.createTime }} {{ item.approvalValue }}</div>
             </template>
           </el-collapse-item>
         </el-collapse>
       </div>
       <div v-if="isFlow">
-        <approve-component ref="approve" @approveFinished="approveFinished"/>
+        <approve-component ref="approve" @approveFinished="approveFinished" />
       </div>
       <e-desc title="基本信息" column="3">
-        <e-desc-item label="物料名称">{{dataForm.productName}}</e-desc-item>
-        <e-desc-item label="物料规格">{{dataForm.productSpec}}</e-desc-item>
-        <e-desc-item label="物料类别">{{dataForm.productTypeValue}}</e-desc-item>
+        <e-desc-item label="物料名称">{{ dataForm.productName }}</e-desc-item>
+        <e-desc-item label="物料规格">{{ dataForm.productSpec }}</e-desc-item>
+        <e-desc-item label="物料类别">{{ dataForm.productTypeValue }}</e-desc-item>
 
-        <e-desc-item label="材料">{{dataForm.materials}}</e-desc-item>
-        <e-desc-item label="物料尺寸">{{dataForm.size}}</e-desc-item>
-        <e-desc-item label="展开尺寸">{{dataForm.developedSize}}</e-desc-item>
+        <e-desc-item label="材料">{{ dataForm.materials }}</e-desc-item>
+        <e-desc-item label="物料尺寸">{{ dataForm.size }}</e-desc-item>
+        <e-desc-item label="展开尺寸">{{ dataForm.developedSize }}</e-desc-item>
 
-        <e-desc-item label="单位">{{dataForm.unit}}</e-desc-item>
-        <e-desc-item label="单套数量">{{dataForm.cnt}}</e-desc-item>
-        <e-desc-item label="主图号">{{dataForm.mapNumber}}</e-desc-item>
+        <e-desc-item label="单位">{{ dataForm.unit }}</e-desc-item>
+        <e-desc-item label="单套数量">{{ dataForm.cnt }}</e-desc-item>
+        <e-desc-item label="主图号">{{ dataForm.mapNumber }}</e-desc-item>
 
-        <e-desc-item label="热处理" span="3">{{dataForm.heatTreatment}}</e-desc-item>
+        <e-desc-item label="热处理" span="3">{{ dataForm.heatTreatment }}</e-desc-item>
 
-        <e-desc-item label="表面处理" span="3">{{dataForm.surfaceTreatment}}</e-desc-item>
+        <e-desc-item label="表面处理" span="3">{{ dataForm.surfaceTreatment }}</e-desc-item>
 
-        <e-desc-item label="关联物料" span="3">{{dataForm.materialCode}}</e-desc-item>
+        <e-desc-item label="关联物料" span="3">{{ dataForm.materialCode }}</e-desc-item>
 
-        <e-desc-item label="备注" span="3">{{dataForm.notes}}</e-desc-item>
+        <e-desc-item label="备注" span="3">{{ dataForm.notes }}</e-desc-item>
 
-        <e-desc-item label="关重件" span="3">{{dataForm.importance}}</e-desc-item>
+        <e-desc-item label="关重件" span="3">{{ dataForm.importance }}</e-desc-item>
 
         <!-- <e-desc-item v-if="dataForm.noticeChangeRecord" label="物料变更描述">{{dataForm.noticeChangeRecord?dataForm.noticeChangeRecord.description:''}}</e-desc-item>
 
@@ -89,288 +89,239 @@
         </e-desc-item> -->
       </e-desc>
       <e-desc title="简图">
-        <upload-component
-          :display="true"
-          :display-title="false"
-          :accept="'*'"
-          :value="dataForm.attachList2"
-        />
+        <upload-component :display="true" :display-title="false" :accept="'*'" :value="dataForm.attachList2" />
       </e-desc>
       <e-desc title="技术资料附件">
-        <upload-component
-          :display="true"
-          :display-title="false"
-          :accept="'*'"
-          :value="dataForm.attachList"
-        />
+        <upload-component :display="true" :display-title="false" :accept="'*'" :value="dataForm.attachList" />
       </e-desc>
       <e-desc title="关联图纸">
-        <el-table
-          :data="dataForm.proDrawings"
-          border
-          style="width: 100%;">
-          <el-table-column
-            label="序号"
-            type="index"
-            width="50"
-            align="center">
+        <el-table :data="dataForm.proDrawings" 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 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 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 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 prop="notes" header-align="center" align="center" label="备注">
           </el-table-column>
         </el-table>
       </e-desc>
       <e-desc title="组合小物料">
-        <el-table
-          :data="productDetails"
-          row-key="productId"
-          border
-          :indent='20'
-          lazy
-          :load="loadingData"
+        <el-table :data="productDetails" row-key="productId" border :indent='20' lazy :load="loadingData"
           style="width: 100%;">
-          <el-table-column
-            label="序号"
-            type="index"
-            width="50"
-            align="center">
+          <el-table-column label="序号" type="index" width="50" align="center" min-width="100"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="mapNumber" header-align="left" align="left" label="主图号" min-width="100"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="productName" header-align="left" align="left" label="物料名称" min-width="100"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column
-            prop="productName"
-            header-align="left"
-            align="left"
-            width="200"
-            :show-tooltip-when-overflow="true"
-            label="物品名称">
+          <el-table-column prop="productSpec" header-align="left" align="left" label="物料规格" min-width="100"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column
-            prop="productSpec"
-            header-align="left"
-            align="left"
-            min-width="120"
-            :show-tooltip-when-overflow="true"
-            label="规格">
+          <el-table-column prop="cnt" header-align="left" align="left" label="单套数量" min-width="60"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column
-            prop="cnt"
-            header-align="left"
-            align="left"
-            min-width="80"
-            :show-tooltip-when-overflow="true"
-            label="数量">
+          <el-table-column prop="unit" header-align="left" align="left" label="单位" min-width="60"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
-          <el-table-column
-            prop="notes"
-            header-align="left"
-            align="left"
-            min-width="220"
-            :show-tooltip-when-overflow="true"
-            label="备注">
+          <el-table-column prop="materials" header-align="left" align="left" label="材料" min-width="100"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="size" header-align="left" align="left" label="物料尺寸" min-width="100"
+            :show-tooltip-when-overflow="true">
+          </el-table-column>
+          <el-table-column prop="notes" header-align="left" align="left" label="备注" min-width="200"
+            :show-tooltip-when-overflow="true">
           </el-table-column>
         </el-table>
       </e-desc>
-<!--      <e-desc title="物料配料清单">-->
-<!--        <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="数量">-->
-<!--          </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>-->
-<!--      </e-desc>-->
+      <!--      <e-desc title="物料配料清单">-->
+      <!--        <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="数量">-->
+      <!--          </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>-->
+      <!--      </e-desc>-->
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="onChose">返回</el-button>
     </span>
     <!-- 文件预览 -->
-    <preview-component v-if="previewVisible" ref="preview"/>
+    <preview-component v-if="previewVisible" ref="preview" />
   </div>
 </template>
 
 <script>
-  import EDesc from '../common/e-desc'
-  import EDescItem from '../common/e-desc-item'
-  import { dealStepData, dealStepLogs } from '@/api/util'
-  import uploadComponent from '../common/upload-component-v2'
-  import { getProductDetail, getChildren } from '@/api/product'
-  import ApproveComponent from '../common/approve-component'
-  import PreviewComponent from '../common/preview-component'
+import EDesc from '../common/e-desc'
+import EDescItem from '../common/e-desc-item'
+import { dealStepData, dealStepLogs } from '@/api/util'
+import uploadComponent from '../common/upload-component-v2'
+import { getProductDetail, getChildren } from '@/api/product'
+import ApproveComponent from '../common/approve-component'
+import PreviewComponent from '../common/preview-component'
 export default {
-    name: 'product-detail',
-    components: {
-      PreviewComponent,
-      EDesc,
-      EDescItem,
-      uploadComponent,
-      ApproveComponent
+  name: 'product-detail',
+  components: {
+    PreviewComponent,
+    EDesc,
+    EDescItem,
+    uploadComponent,
+    ApproveComponent
+  },
+  data() {
+    return {
+      visible: false,
+      isFlow: false,
+      previewVisible: false,
+      id: 0,
+      dataForm: {},
+      materialList: [],
+      productDetails: [],
+      activeNo: 0,
+      stepList: [],
+      logList: [],
+      fileList: []
+    }
+  },
+  methods: {
+    onChose() {
+      this.$emit('onChose')
     },
-    data () {
-      return {
-        visible: false,
-        isFlow: false,
-        previewVisible: false,
-        id: 0,
-        dataForm: {},
-        materialList: [],
-        productDetails: [],
-        activeNo: 0,
-        stepList: [],
-        logList: [],
-        fileList: []
-      }
+    async init(id, businessType) {
+      this.visible = true
+      this.isFlow = !!(businessType && businessType !== '')
+      this.id = id || 0
+      this.dataForm = {}
+      this.materialList = []
+      this.productDetails = []
+      this.stepList = []
+      this.logList = []
+      this.fileList = []
+      this.getDetails(businessType)
     },
-    methods: {
-      onChose () {
-        this.$emit('onChose')
-      },
-      async init (id, businessType) {
-        this.visible = true
-        this.isFlow = !!(businessType && businessType !== '')
-        this.id = id || 0
-        this.dataForm = {}
-        this.materialList = []
-        this.productDetails = []
-        this.stepList = []
-        this.logList = []
-        this.fileList = []
-        this.getDetails(businessType)
-      },
-      getDetails (businessType) {
-        getProductDetail(this.id).then(({data}) => {
-          if (data && data.code === '200') {
-            this.dataForm = data.data
-            // 流程图展示
-            if (data.data.workFlowBusinessExt) {
-              dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
-              dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
-            }
-            if (data.data.workFlowProcessStepList) {
-              this.activeNo = Number(data.data.workFlowProcessStepList.activeNo)
-            }
-            // 组合小物料
-            data.data.proProductList.forEach((item) => {
-              this.productDetails.push(item)
+    getDetails(businessType) {
+      getProductDetail(this.id).then(({ data }) => {
+        if (data && data.code === '200') {
+          this.dataForm = data.data
+          // 流程图展示
+          if (data.data.workFlowBusinessExt) {
+            dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
+            dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
+          }
+          if (data.data.workFlowProcessStepList) {
+            this.activeNo = Number(data.data.workFlowProcessStepList.activeNo)
+          }
+          // 组合小物料
+          data.data.proProductList.forEach((item) => {
+            this.productDetails.push(item)
+          })
+          // 物料配料清单
+          if (data.data.productMaterialList) {
+            data.data.productMaterialList.forEach((item) => {
+              this.materialList.push(item)
             })
-            // 物料配料清单
-            if (data.data.productMaterialList) {
-              data.data.productMaterialList.forEach((item) => {
-                this.materialList.push(item)
-              })
-            }
-            // 物料图纸
-            if (data.data.proDrawings) {
-              // this.dataForm.drawingIdList = []
-              data.data.proDrawings.forEach((item) => {
-                if (item.attachList) {
-                  item.attachList.forEach((item1) => {
-                    this.fileList.push({
-                      fileName: item1.fileName,
-                      url: item1.url,
-                      id: item1.url
-                    })
+          }
+          // 物料图纸
+          if (data.data.proDrawings) {
+            // this.dataForm.drawingIdList = []
+            data.data.proDrawings.forEach((item) => {
+              if (item.attachList) {
+                item.attachList.forEach((item1) => {
+                  this.fileList.push({
+                    fileName: item1.fileName,
+                    url: item1.url,
+                    id: item1.url
                   })
-                }
-              })
-            }
-            // 初始化审批Form
-            this.showApproveForm(businessType, this.id)
+                })
+              }
+            })
           }
-        })
-      },
-      // 初始化审批Form
-      showApproveForm (businessType, businessId) {
-        if (this.isFlow) {
-          this.$nextTick(() => {
-            this.$refs.approve.init(businessType, businessId)
-          })
+          // 初始化审批Form
+          this.showApproveForm(businessType, this.id)
         }
-      },
-      // 审批完成
-      approveFinished () {
-        this.onChose()
-        this.$emit('approveFinished')
-      },
-      // 预览
-      previewFile (fileName, url) {
-        this.previewVisible = true
+      })
+    },
+    // 初始化审批Form
+    showApproveForm(businessType, businessId) {
+      if (this.isFlow) {
         this.$nextTick(() => {
-          this.$refs.preview.init(fileName, url)
-        })
-      },
-      loadingData (row, treeNode, resolve) {
-        getChildren(row.productId).then(({data}) => {
-          if (data && data.code === '200') {
-            resolve(data.data)
-          } else {
-            this.$message.error(data.msg)
-          }
+          this.$refs.approve.init(businessType, businessId)
         })
       }
+    },
+    // 审批完成
+    approveFinished() {
+      this.onChose()
+      this.$emit('approveFinished')
+    },
+    // 预览
+    previewFile(fileName, url) {
+      this.previewVisible = true
+      this.$nextTick(() => {
+        this.$refs.preview.init(fileName, url)
+      })
+    },
+    loadingData(row, treeNode, resolve) {
+      getChildren(row.productId).then(({ data }) => {
+        if (data && data.code === '200') {
+          resolve(data.data)
+        } else {
+          this.$message.error(data.msg)
+        }
+      })
     }
   }
+}
 </script>
 
 <style scoped>
-.my-line{
+.my-line {
   border-bottom: 1px solid #c0c4cc;
   margin-bottom: 10px;
 }
-.title{
-  padding: 10px 0 ;
+
+.title {
+  padding: 10px 0;
 }
 </style>

src/views/modules/tech/product-management.vue

@@ -1,828 +1,684 @@
 <!-- BOM清单 -->
 <template>
   <div class="product-management">
-    <template v-if="!addOrUpdateVisible && !changeFormVisible && !attachVisible && !detailVisible && !craftsVisible && !drawVisible && !changeVisible && !noticeChangeVisible && !importVisible">
+    <template
+      v-if="!addOrUpdateVisible && !changeFormVisible && !attachVisible && !detailVisible && !craftsVisible && !drawVisible && !changeVisible && !noticeChangeVisible && !importVisible">
       <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
         <el-form-item label="名称/图号">
-          <el-input v-model="dataForm.productName" placeholder="物料名称/图号" clearable/>
+          <el-input v-model="dataForm.productName" placeholder="物料名称/图号" clearable />
         </el-form-item>
         <el-form-item label="物料类别">
-          <el-select
-            v-model="dataForm.productType"
-            remote
-            placeholder="请选择">
-            <el-option
-              v-for="item in optionsType"
-              :key="item.code"
-              :label="item.value"
-              :value="item.code">
+          <el-select v-model="dataForm.productType" 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-form-item label="图号">
           <el-input v-model="dataForm.mapNumber" placeholder="图号" clearable/>
         </el-form-item> -->
-<!--        <el-form-item label="是否组合">-->
-<!--          <el-select-->
-<!--            v-model="dataForm.isCompose"-->
-<!--            placeholder="请选择">-->
-<!--            <el-option-->
-<!--              v-for="item in optionsCompose"-->
-<!--              :key="item.value"-->
-<!--              :label="item.label"-->
-<!--              :value="item.value">-->
-<!--            </el-option>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
+        <!--        <el-form-item label="是否组合">-->
+        <!--          <el-select-->
+        <!--            v-model="dataForm.isCompose"-->
+        <!--            placeholder="请选择">-->
+        <!--            <el-option-->
+        <!--              v-for="item in optionsCompose"-->
+        <!--              :key="item.value"-->
+        <!--              :label="item.label"-->
+        <!--              :value="item.value">-->
+        <!--            </el-option>-->
+        <!--          </el-select>-->
+        <!--        </el-form-item>-->
         <el-form-item>
           <el-button @click="search()">查询</el-button>
-          <el-button v-if="isAuth('pro:product:save')" type="primary" @click="addOrUpdateHandle(0, false)">新建</el-button>
-          <el-button v-if="isAuth('pro:product:noteChangeConfig')" type="primary" @click="setNoticeChangeHandel()">变更通知人设置</el-button>
+          <el-button v-if="isAuth('pro:product:save')" type="primary"
+            @click="addOrUpdateHandle(0, false)">新建</el-button>
+          <el-button v-if="isAuth('pro:product:noteChangeConfig')" type="primary"
+            @click="setNoticeChangeHandel()">变更通知人设置</el-button>
           <!-- <el-button type="primary" @click="importFromExcel">导入清单</el-button> -->
           <el-button type="primary" @click="templateDownload">清单模板下载</el-button>
         </el-form-item>
       </el-form>
-      <el-table
-        ref="treeTable"
-        :data="dataList"
-        row-key="productId"
-        border
-        :indent='20'
-        lazy
-        :load="loadingData"
-        v-loading="dataListLoading"
-        @expand-change="handleExpandChange"
-        :expand-row-keys="expandedRowKeys"
-        @row-click="openDetail"
-        style="width: 100%;">
-        <el-table-column
-          label="序号"
-          type="index"
-          width="50"
-          align="center">
+      <el-table ref="treeTable" :data="dataList" row-key="productId" border :indent='20' lazy :load="loadingData"
+        v-loading="dataListLoading" @expand-change="handleExpandChange" :expand-row-keys="expandedRowKeys"
+        @row-click="openDetail" style="width: 100%;">
+        <el-table-column label="序号" type="index" width="50" align="center">
         </el-table-column>
-        <el-table-column
-          prop="productCode"
-          header-align="center"
-          align="center"
-          width="200"
-          :show-tooltip-when-overflow="true"
-          label="物料编码">
+        <el-table-column prop="productCode" header-align="center" align="center" width="200"
+          :show-tooltip-when-overflow="true" label="物料编码">
         </el-table-column>
-        <el-table-column
-          prop="mapNumber"
-          header-align="center"
-          align="center"
-          width="120"
-          :show-tooltip-when-overflow="true"
-          label="图号">
+        <el-table-column prop="mapNumber" header-align="center" align="center" width="120"
+          :show-tooltip-when-overflow="true" label="图号">
         </el-table-column>
-        <el-table-column
-          prop="simplePic"
-          header-align="center"
-          align="center"
-          min-width="120"
-          label="简图">
+        <el-table-column prop="simplePic" header-align="center" align="center" min-width="120" label="简图">
           <template slot-scope="scope">
             <el-popover placement="right" title="" trigger="hover">
               <img :src="scope.row.simplePic" style="height: 400px;width: 500px">
-              <img slot="reference" :src="scope.row.simplePic" :alt="scope.row.simplePic" style="max-height: 50px;max-width: 130px">
+              <img slot="reference" :src="scope.row.simplePic" :alt="scope.row.simplePic"
+                style="max-height: 50px;max-width: 130px">
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="productName"
-          header-align="center"
-          align="center"
-          width="140"
-          :show-tooltip-when-overflow="true"
-          label="物料名称">
+        <el-table-column prop="productName" header-align="center" align="center" width="140"
+          :show-tooltip-when-overflow="true" label="物料名称">
         </el-table-column>
-        <el-table-column
-          prop="importance"
-          header-align="center"
-          align="center"
-          width="140"
-          :show-tooltip-when-overflow="true"
-          label="关重件">
+        <el-table-column prop="importance" header-align="center" align="center" width="140"
+          :show-tooltip-when-overflow="true" label="关重件">
         </el-table-column>
-        <el-table-column
-          prop="productSpec"
-          header-align="center"
-          align="center"
-          width="140"
-          :show-tooltip-when-overflow="true"
-          label="物料规格">
+        <el-table-column prop="productSpec" header-align="center" align="center" width="140"
+          :show-tooltip-when-overflow="true" label="物料规格">
         </el-table-column>
-        <el-table-column
-          prop="productType"
-          header-align="center"
-          align="center"
-          min-width="120"
-          :formatter="typeFormat"
+        <el-table-column prop="productType" header-align="center" align="center" min-width="120" :formatter="typeFormat"
           label="类别">
         </el-table-column>
-        <el-table-column
-          prop="isCompose"
-          header-align="center"
-          align="center"
-          min-width="80"
-          :formatter="composeFormat"
+        <el-table-column prop="isCompose" header-align="center" align="center" min-width="80" :formatter="composeFormat"
           label="是否组合">
         </el-table-column>
-        <el-table-column
-          prop="materials"
-          header-align="center"
-          align="center"
-          width="140"
-          :show-tooltip-when-overflow="true"
-          label="材料">
+        <el-table-column prop="materials" header-align="center" align="center" width="140"
+          :show-tooltip-when-overflow="true" label="材料">
         </el-table-column>
-        <el-table-column
-          prop="cnt"
-          header-align="center"
-          align="center"
-          label="单套数量">
+        <el-table-column prop="cnt" header-align="center" align="center" label="单套数量">
         </el-table-column>
-        <el-table-column
-          prop="unit"
-          header-align="center"
-          align="center"
-          label="单位">
+        <el-table-column prop="unit" header-align="center" align="center" label="单位">
         </el-table-column>
-        <el-table-column
-          prop="size"
-          header-align="center"
-          align="center"
-          label="物料尺寸">
+        <el-table-column prop="size" header-align="center" align="center" label="物料尺寸">
         </el-table-column>
-        <el-table-column
-          prop="developedSize"
-          header-align="center"
-          align="center"
-          width="100"
-          :show-tooltip-when-overflow="true"
-          label="展开尺寸">
+        <el-table-column prop="developedSize" header-align="center" align="center" width="100"
+          :show-tooltip-when-overflow="true" label="展开尺寸">
         </el-table-column>
-        <el-table-column
-          prop="surfaceTreatment"
-          header-align="center"
-          align="center"
-          width="100"
-          :show-tooltip-when-overflow="true"
-          label="表面处理">
+        <el-table-column prop="surfaceTreatment" header-align="center" align="center" width="100"
+          :show-tooltip-when-overflow="true" label="表面处理">
         </el-table-column>
-        <el-table-column
-          prop="heatTreatment"
-          header-align="center"
-          align="center"
-          width="100"
-          :show-tooltip-when-overflow="true"
-          label="热处理">
+        <el-table-column prop="heatTreatment" header-align="center" align="center" width="100"
+          :show-tooltip-when-overflow="true" label="热处理">
         </el-table-column>
-        <el-table-column
-          prop="sourceName"
-          header-align="center"
-          align="center"
-          width="160"
-          :show-overflow-tooltip="true"
-          label="来源">
+        <el-table-column prop="sourceName" header-align="center" align="center" width="160"
+          :show-overflow-tooltip="true" label="来源">
         </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          width="140"
-          :show-overflow-tooltip="true"
-          label="更改说明">
+        <el-table-column header-align="center" align="center" width="140" :show-overflow-tooltip="true" label="更改说明">
           <template slot-scope="scope">
-            <span>{{scope.row.noticeChangeRecord?scope.row.noticeChangeRecord.description:''}}</span>
+            <span>{{ scope.row.noticeChangeRecord ? scope.row.noticeChangeRecord.description : '' }}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          label="更改单">
+        <el-table-column header-align="center" align="center" label="更改单">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.noticeChangeRecord || !scope.row.noticeChangeRecord.attachList || scope.row.noticeChangeRecord.attachList.length === 0" type="text" size="small" @click="changeDetails(scope.row)">查看</el-button>
+            <el-button
+              :disabled="!scope.row.noticeChangeRecord || !scope.row.noticeChangeRecord.attachList || scope.row.noticeChangeRecord.attachList.length === 0"
+              type="text" size="small" @click="changeDetails(scope.row)">查看</el-button>
           </template>
         </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          label="技术文件">
+        <el-table-column header-align="center" align="center" label="技术文件">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.attachList || scope.row.attachList.length === 0" type="text" size="small" @click="attachDetails(scope.row)">查看</el-button>
+            <el-button :disabled="!scope.row.attachList || scope.row.attachList.length === 0" type="text" size="small"
+              @click="attachDetails(scope.row)">查看</el-button>
           </template>
         </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          label="物料配料清单">
+        <el-table-column header-align="center" align="center" label="物料配料清单">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.listingList || scope.row.listingList.length === 0" type="text" size="small" @click="attachDetails2(scope.row)">查看</el-button>
+            <el-button :disabled="!scope.row.listingList || scope.row.listingList.length === 0" type="text" size="small"
+              @click="attachDetails2(scope.row)">查看</el-button>
           </template>
         </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          label="对应图纸">
+        <el-table-column header-align="center" align="center" label="对应图纸">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small" @click="drawDetails(scope.row)">查看</el-button>
+            <el-button :disabled="!scope.row.proDrawings || scope.row.proDrawings.length === 0" type="text" size="small"
+              @click="drawDetails(scope.row)">查看</el-button>
           </template>
         </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          label="对应工艺">
+        <el-table-column header-align="center" align="center" label="对应工艺">
           <template slot-scope="scope">
-            <el-button :disabled="!scope.row.techId" type="text" size="small" @click="techDetails(scope.row.techId)">查看</el-button>
+            <el-button :disabled="!scope.row.techId" type="text" size="small"
+              @click="techDetails(scope.row.techId)">查看</el-button>
           </template>
         </el-table-column>
-        <el-table-column
-          prop="createTime"
-          header-align="center"
-          align="center"
-          min-width="160"
-          label="创建时间">
+        <el-table-column prop="createTime" header-align="center" align="center" min-width="160" label="创建时间">
         </el-table-column>
-        <el-table-column
-          prop="creatorName"
-          header-align="center"
-          align="center"
-          min-width="100"
-          label="创建人">
+        <el-table-column prop="creatorName" header-align="center" align="center" min-width="100" label="创建人">
         </el-table-column>
-        <el-table-column
-          prop="notes"
-          header-align="center"
-          align="center"
-          min-width="180"
-          :show-overflow-tooltip="true"
+        <el-table-column prop="notes" header-align="center" align="center" min-width="180" :show-overflow-tooltip="true"
           label="备注">
         </el-table-column>
-        <el-table-column
-          fixed="right"
-          header-align="center"
-          align="center"
-          min-width="80"
-          :formatter="formatState"
-          :show-overflow-tooltip="true"
-          label="状态">
+        <el-table-column fixed="right" header-align="center" align="center" min-width="80" :formatter="formatState"
+          :show-overflow-tooltip="true" label="状态">
         </el-table-column>
-        <el-table-column
-          fixed="right"
-          header-align="center"
-          align="center"
-          min-width="80"
-          :formatter="formatReadState"
-          :show-overflow-tooltip="true"
-          label="读写状态">
+        <el-table-column fixed="right" header-align="center" align="center" min-width="80" :formatter="formatReadState"
+          :show-overflow-tooltip="true" label="读写状态">
         </el-table-column>
-        <el-table-column
-          fixed="right"
-          header-align="center"
-          align="center"
-          width="170"
-          label="操作">
+        <el-table-column fixed="right" header-align="center" align="center" width="170" label="操作">
           <template slot-scope="scope">
-            <el-button v-if="isAuth('pro:product:synchronization') && (!scope.row.materialId || false)" type="text" size="small" @click="syncHandle(scope.row.productId)">同步仓库</el-button>
-            <el-button v-if="isAuth('pro:product:info')" type="text" size="small" @click="detailHandle(scope.row.productId)">查看</el-button>
-            <el-button v-if="isAuth('pro:product:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.productId, false)">编辑</el-button>
-            <el-button v-if="isAuth('pro:product:change')" type="text" size="small" @click="changeHandle(scope.row.productId)">变更</el-button>
-            <el-button v-if="isAuth('pro:product:read') && Number(scope.row.writeState) === 2" type="text" size="small" @click="readHandle(scope.row.productId)">只读</el-button>
-            <el-button v-if="isAuth('pro:product:write') && Number(scope.row.writeState) === 1" type="text" size="small" @click="writeHandle(scope.row.productId)">读写</el-button>
-            <el-button v-if="isAuth('pro:product:pause') && Number(scope.row.state) === 1" type="text" size="small" @click="pauseHandle(scope.row.productId)">暂停生产</el-button>
-            <el-button v-if="isAuth('pro:product:regain') && Number(scope.row.state) === 2" type="text" size="small" @click="regainHandle(scope.row.productId)">恢复生产</el-button>
-            <el-button v-if="isAuth('pro:product:delete')" style="color: red" type="text" size="small" @click="deleteHandle(scope.row.productId)">删除</el-button>
+            <el-button v-if="isAuth('pro:product:synchronization') && (!scope.row.materialId || false)" type="text"
+              size="small" @click="syncHandle(scope.row.productId)">同步仓库</el-button>
+            <el-button v-if="isAuth('pro:product:info')" type="text" size="small"
+              @click="detailHandle(scope.row.productId)">查看</el-button>
+            <el-button v-if="isAuth('pro:product:update')" type="text" size="small"
+              @click="addOrUpdateHandle(scope.row.productId, false)">编辑</el-button>
+            <el-button v-if="isAuth('pro:product:change')" type="text" size="small"
+              @click="changeHandle(scope.row.productId)">变更</el-button>
+            <el-button v-if="isAuth('pro:product:read') && Number(scope.row.writeState) === 2" type="text" size="small"
+              @click="readHandle(scope.row.productId)">只读</el-button>
+            <el-button v-if="isAuth('pro:product:write') && Number(scope.row.writeState) === 1" type="text" size="small"
+              @click="writeHandle(scope.row.productId)">读写</el-button>
+            <el-button v-if="isAuth('pro:product:pause') && Number(scope.row.state) === 1" type="text" size="small"
+              @click="pauseHandle(scope.row.productId)">暂停生产</el-button>
+            <el-button v-if="isAuth('pro:product:regain') && Number(scope.row.state) === 2" type="text" size="small"
+              @click="regainHandle(scope.row.productId)">恢复生产</el-button>
+            <el-button v-if="isAuth('pro:product:delete')" style="color: red" type="text" size="small"
+              @click="deleteHandle(scope.row.productId)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-pagination
-        @size-change="sizeChangeHandle"
-        @current-change="currentChangeHandle"
-        :current-page="pageIndex"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="pageSize"
-        :total="totalPage"
+      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
+        :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
         layout="total, sizes, prev, pager, next, jumper">
       </el-pagination>
     </template>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @onChose="onChose"></add-or-update>
-    <detail v-if="detailVisible" ref="detail" @onChose="onChose"/>
-    <crafts-detail v-if="craftsVisible" ref="craftsDetail" @onChose="onChose"/>
-    <product-draw-detail v-if="drawVisible" ref="drawDetail" @onChose="onChose"/>
-    <attach-detail v-if="changeVisible" ref="changeDetail" @onChose="onChose"/>
-    <attach-detail v-if="attachVisible" ref="attachDetail" @onChose="onChose"/>
-    <notice-change-setting v-if="noticeChangeVisible" ref="noticeChangeSetting" @onChose="onChose"/>
-    <change-form v-if="changeFormVisible" ref="changeForm" @refreshDataList="getDataList" @onChose="onChose"/>
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"
+      @onChose="onChose"></add-or-update>
+    <detail v-if="detailVisible" ref="detail" @onChose="onChose" />
+    <crafts-detail v-if="craftsVisible" ref="craftsDetail" @onChose="onChose" />
+    <product-draw-detail v-if="drawVisible" ref="drawDetail" @onChose="onChose" />
+    <attach-detail v-if="changeVisible" ref="changeDetail" @onChose="onChose" />
+    <attach-detail v-if="attachVisible" ref="attachDetail" @onChose="onChose" />
+    <notice-change-setting v-if="noticeChangeVisible" ref="noticeChangeSetting" @onChose="onChose" />
+    <change-form v-if="changeFormVisible" ref="changeForm" @refreshDataList="getDataList" @onChose="onChose" />
 
-      <el-dialog title="导入清单" :visible.sync="importVisible">
-        <el-upload
-          class="upload-demo"
-          ref="upload"
-          :on-remove="handleRemove"
-          action="#"
-          :limit="1"
-          :file-list="fileList"
-          :auto-upload="false"
-          :http-request="handleUpload"
-          v-loading="importLoading"
-          >
-          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
-          <el-button size="small" type="success" @click="submitUpload" >开始上传</el-button>
-        </el-upload>
-      </el-dialog>
+    <el-dialog title="导入清单" :visible.sync="importVisible">
+      <el-upload class="upload-demo" ref="upload" :on-remove="handleRemove" action="#" :limit="1" :file-list="fileList"
+        :auto-upload="false" :http-request="handleUpload" v-loading="importLoading">
+        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+        <el-button size="small" type="success" @click="submitUpload">开始上传</el-button>
+      </el-upload>
+    </el-dialog>
 
   </div>
 </template>
 
 <script>
-  import Vue from 'vue'
-  import AddOrUpdate from './product-add-or-update'
-  import Detail from './product-detail'
-  import { getDictList } from '@/api/dict'
-  import { getProductList, getChildren } from '@/api/product'
-  import CraftsDetail from './crafts-detail'
-  import ProductDrawDetail from './product-draw-detail'
-  import AttachDetail from '../common/attach-detail'
-  import NoticeChangeSetting from './product-notice-change-setting'
-  import ChangeForm from './product-change'
-  import {bomStateOption, writeStateOption, optionsCompose} from '@/utils/enums'
-  import UploadComponent from '@/views/modules/common/upload-component-v2'
-  import { downloadUrl } from '@/api/file'
+import Vue from 'vue'
+import AddOrUpdate from './product-add-or-update'
+import Detail from './product-detail'
+import { getDictList } from '@/api/dict'
+import { getProductList, getChildren } from '@/api/product'
+import CraftsDetail from './crafts-detail'
+import ProductDrawDetail from './product-draw-detail'
+import AttachDetail from '../common/attach-detail'
+import NoticeChangeSetting from './product-notice-change-setting'
+import ChangeForm from './product-change'
+import { bomStateOption, writeStateOption, optionsCompose } from '@/utils/enums'
+import UploadComponent from '@/views/modules/common/upload-component-v2'
+import { downloadUrl } from '@/api/file'
 
 export default {
-    name: 'product-management',
-    components: {
-      AttachDetail,
-      ProductDrawDetail,
-      CraftsDetail,
-      AddOrUpdate,
-      Detail,
-      NoticeChangeSetting,
-      ChangeForm,
-      UploadComponent
-    },
-    data () {
-      return {
-        addOrUpdateVisible: false,
-        attachVisible: false,
-        detailVisible: false,
-        craftsVisible: false,
-        drawVisible: false,
-        changeVisible: false,
-        noticeChangeVisible: false,
-        changeFormVisible: false,
-        importVisible: false,
-        dataForm: {},
-        dataList: [],
-        pageIndex: 1,
-        pageSize: 10,
-        totalPage: 0,
-        dataListLoading: false,
-        dataListSelections: [],
-        optionsType: [],
-        bomStateOption: bomStateOption,
-        writeStateOption: writeStateOption,
-        optionsCompose: optionsCompose,
-        importForm: {},
-        importLoading: false,
-        fileList: [],
-        expandedRowKeys: [], // 展开行的key数组
-        treeMap: new Map()
-      }
+  name: 'product-management',
+  components: {
+    AttachDetail,
+    ProductDrawDetail,
+    CraftsDetail,
+    AddOrUpdate,
+    Detail,
+    NoticeChangeSetting,
+    ChangeForm,
+    UploadComponent
+  },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      attachVisible: false,
+      detailVisible: false,
+      craftsVisible: false,
+      drawVisible: false,
+      changeVisible: false,
+      noticeChangeVisible: false,
+      changeFormVisible: false,
+      importVisible: false,
+      dataForm: {},
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      optionsType: [],
+      bomStateOption: bomStateOption,
+      writeStateOption: writeStateOption,
+      optionsCompose: optionsCompose,
+      importForm: {},
+      importLoading: false,
+      fileList: [],
+      expandedRowKeys: [], // 展开行的key数组
+      treeMap: new Map()
+    }
+  },
+  created() {
+    this.getTypeList()
+    // this.getStateList()
+    this.getDataList()
+  },
+  methods: {
+    onChose() {
+      this.addOrUpdateVisible = false
+      this.attachVisible = false
+      this.detailVisible = false
+      this.craftsVisible = false
+      this.drawVisible = false
+      this.changeVisible = false
+      this.noticeChangeVisible = false
+      this.changeFormVisible = false
     },
-    created () {
-      this.getTypeList()
-      // this.getStateList()
+    // 获取物料类别字典
+    getTypeList() {
+      getDictList({ type: 'product_type' }).then(({ data }) => {
+        if (data) {
+          this.optionsType = data
+        }
+      })
+    },
+    // 查询
+    search() {
+      this.pageIndex = 1
       this.getDataList()
     },
-    methods: {
-      onChose () {
-        this.addOrUpdateVisible = false
-        this.attachVisible = false
-        this.detailVisible = false
-        this.craftsVisible = false
-        this.drawVisible = false
-        this.changeVisible = false
-        this.noticeChangeVisible = false
-        this.changeFormVisible = false
-      },
-      // 获取物料类别字典
-      getTypeList () {
-        getDictList({type: 'product_type'}).then(({data}) => {
-          if (data) {
-            this.optionsType = data
-          }
-        })
-      },
-      // 查询
-      search () {
-        this.pageIndex = 1
-        this.getDataList()
-      },
-      // 获取数据列表
-      getDataList () {
-        this.dataListLoading = true
-        this.addOrUpdateVisible = false
-        let params = {
-          ...this.dataForm,
-          'current': this.pageIndex,
-          'size': this.pageSize
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true
+      this.addOrUpdateVisible = false
+      let params = {
+        ...this.dataForm,
+        'current': this.pageIndex,
+        'size': this.pageSize
+      }
+      getProductList(params).then(({ data }) => {
+        if (data && data.code === '200') {
+          this.dataList = data.data.records
+          // this.dataList = JSON.parse(JSON.stringify(data.data.records).replace(/"children":null/g, '"children":[]'))
+          // 简图格式调整
+          this.dataList.forEach(item => {
+            if (item.attachList2 && item.attachList2.length > 0) {
+              item.simplePic = downloadUrl + item.attachList2[0].url
+            } else {
+              item.simplePic = ''
+            }
+          })
+          this.totalPage = Number(data.data.total)
+        } else {
+          this.dataList = []
+          this.totalPage = 0
         }
-        getProductList(params).then(({data}) => {
+        this.dataListLoading = false
+      })
+    },
+    deleteHandle(id) {
+      if (!id) return
+      let ids = []
+      ids.push(id)
+      this.$confirm(`确定删除?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/product/delete`),
+          method: 'DELETE',
+          data: ids
+        }).then(({ data }) => {
           if (data && data.code === '200') {
-            this.dataList = data.data.records
-            // this.dataList = JSON.parse(JSON.stringify(data.data.records).replace(/"children":null/g, '"children":[]'))
-            // 简图格式调整
-            this.dataList.forEach(item => {
-              if (item.attachList2 && item.attachList2.length > 0) {
-                item.simplePic = downloadUrl + item.attachList2[0].url
-              } else {
-                item.simplePic = ''
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
               }
             })
-            this.totalPage = Number(data.data.total)
           } else {
-            this.dataList = []
-            this.totalPage = 0
+            this.$message.error(data.msg)
           }
-          this.dataListLoading = false
         })
-      },
-      deleteHandle (id) {
-        if (!id) return
-        let ids = []
-        ids.push(id)
-        this.$confirm(`确定删除?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`/biz-service/product/delete`),
-            method: 'DELETE',
-            data: ids
-          }).then(({data}) => {
-            if (data && data.code === '200') {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        }).catch(() => {})
-      },
-      // 每页数
-      sizeChangeHandle (val) {
-        this.pageSize = val
-        this.pageIndex = 1
-        this.getDataList()
-      },
-      // 当前页
-      currentChangeHandle (val) {
-        this.pageIndex = val
-        this.getDataList()
-      },
-      // 多选
-      selectionChangeHandle (val) {
-        this.dataListSelections = val
-      },
-      // 新增 / 修改
-      addOrUpdateHandle (id, disable) {
-        this.addOrUpdateVisible = true
-        this.$nextTick(() => {
-          this.$refs.addOrUpdate.init(id, disable)
-        })
-      },
-      // 变更
-      changeHandle (id) {
-        this.changeFormVisible = true
-        this.$nextTick(() => {
-          this.$refs.changeForm.init(id)
-        })
-      },
-      // 转换属性“物料类别”
-      typeFormat (row) {
-        if (this.optionsType) {
-          for (let i = 0; i < this.optionsType.length; i++) {
-            if (this.optionsType[i].code === row.productType) {
-              return this.optionsType[i].value
-            }
+      }).catch(() => { })
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id, disable) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, disable)
+      })
+    },
+    // 变更
+    changeHandle(id) {
+      this.changeFormVisible = true
+      this.$nextTick(() => {
+        this.$refs.changeForm.init(id)
+      })
+    },
+    // 转换属性“物料类别”
+    typeFormat(row) {
+      if (this.optionsType) {
+        for (let i = 0; i < this.optionsType.length; i++) {
+          if (this.optionsType[i].code === row.productType) {
+            return this.optionsType[i].value
           }
         }
-      },
-      // 转换属性“是否组合物料”
-      composeFormat (row) {
-        if (!row.isCompose) return ''
-        if (Number(row.isCompose) === 1) {
-          return '是'
-        } else return '否'
-      },
-      // 详情
-      detailHandle (id) {
-        this.detailVisible = true
-        this.$nextTick(() => {
-          this.$refs.detail.init(id)
-        })
-      },
-      // 变更通知人设置
-      setNoticeChangeHandel () {
-        this.noticeChangeVisible = true
-        this.$nextTick(() => {
-          this.$refs.noticeChangeSetting.init()
-        })
-      },
-      // 对应图纸
-      drawDetails (row) {
-        this.drawVisible = true
-        this.$nextTick(() => {
-          this.$refs.drawDetail.init(row.proDrawings)
-        })
-      },
-      // 对应工艺
-      techDetails (id) {
-        this.craftsVisible = true
-        this.$nextTick(() => {
-          this.$refs.craftsDetail.init(id)
-        })
-      },
-      // 物料更改通知单
-      changeDetails (row) {
-        this.changeVisible = true
-        this.$nextTick(() => {
-          this.$refs.changeDetail.init(row.noticeChangeRecord.attachList)
+      }
+    },
+    // 转换属性“是否组合物料”
+    composeFormat(row) {
+      if (!row.isCompose) return ''
+      if (Number(row.isCompose) === 1) {
+        return '是'
+      } else return '否'
+    },
+    // 详情
+    detailHandle(id) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.detail.init(id)
+      })
+    },
+    // 变更通知人设置
+    setNoticeChangeHandel() {
+      this.noticeChangeVisible = true
+      this.$nextTick(() => {
+        this.$refs.noticeChangeSetting.init()
+      })
+    },
+    // 对应图纸
+    drawDetails(row) {
+      this.drawVisible = true
+      this.$nextTick(() => {
+        this.$refs.drawDetail.init(row.proDrawings)
+      })
+    },
+    // 对应工艺
+    techDetails(id) {
+      this.craftsVisible = true
+      this.$nextTick(() => {
+        this.$refs.craftsDetail.init(id)
+      })
+    },
+    // 物料更改通知单
+    changeDetails(row) {
+      this.changeVisible = true
+      this.$nextTick(() => {
+        this.$refs.changeDetail.init(row.noticeChangeRecord.attachList)
+      })
+    },
+    // 物料技术文件
+    attachDetails(row) {
+      this.attachVisible = true
+      this.$nextTick(() => {
+        this.$refs.attachDetail.init(row.attachList)
+      })
+    },
+    // 物料配料清单附件
+    attachDetails2(row) {
+      this.attachVisible = true
+      this.$nextTick(() => {
+        this.$refs.attachDetail.init(row.listingList)
+      })
+    },
+    // 状态
+    formatState(row) {
+      if (!row.state) return ''
+      let option = this.bomStateOption.find(t => t.value === row.state)
+      if (option != null) {
+        return option.label
+      }
+      return ''
+    },
+    formatReadState(row) {
+      if (!row.writeState) return ''
+      let option = this.writeStateOption.find(t => t.value === row.writeState)
+      if (option != null) {
+        return option.label
+      }
+      return ''
+    },
+    pauseHandle(id) {
+      if (!id) return
+      this.$confirm(`确定暂停?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/product/pause`),
+          method: 'POST',
+          data: { id: id }
+        }).then(({ data }) => {
+          if (data && data.code === '200') {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
+              }
+            })
+          } else {
+            this.$message.error(data.msg)
+          }
         })
-      },
-      // 物料技术文件
-      attachDetails (row) {
-        this.attachVisible = true
-        this.$nextTick(() => {
-          this.$refs.attachDetail.init(row.attachList)
+      }).catch(() => { })
+    },
+    regainHandle(id) {
+      if (!id) return
+      this.$confirm(`确定恢复?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/product/regain`),
+          method: 'POST',
+          data: { id: id }
+        }).then(({ data }) => {
+          if (data && data.code === '200') {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
+              }
+            })
+          } else {
+            this.$message.error(data.msg)
+          }
         })
-      },
-      // 物料配料清单附件
-      attachDetails2 (row) {
-        this.attachVisible = true
-        this.$nextTick(() => {
-          this.$refs.attachDetail.init(row.listingList)
+      }).catch(() => { })
+    },
+    readHandle(id) {
+      if (!id) return
+      this.$confirm(`确定只读?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/product/read`),
+          method: 'POST',
+          data: { id: id }
+        }).then(({ data }) => {
+          if (data && data.code === '200') {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
+              }
+            })
+          } else {
+            this.$message.error(data.msg)
+          }
         })
-      },
-      // 状态
-      formatState (row) {
-        if (!row.state) return ''
-        let option = this.bomStateOption.find(t => t.value === row.state)
-        if (option != null) {
-          return option.label
-        }
-        return ''
-      },
-      formatReadState (row) {
-        if (!row.writeState) return ''
-        let option = this.writeStateOption.find(t => t.value === row.writeState)
-        if (option != null) {
-          return option.label
-        }
-        return ''
-      },
-      pauseHandle (id) {
-        if (!id) return
-        this.$confirm(`确定暂停?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`/biz-service/product/pause`),
-            method: 'POST',
-            data: {id: id}
-          }).then(({data}) => {
-            if (data && data.code === '200') {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        }).catch(() => {})
-      },
-      regainHandle (id) {
-        if (!id) return
-        this.$confirm(`确定恢复?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`/biz-service/product/regain`),
-            method: 'POST',
-            data: {id: id}
-          }).then(({data}) => {
-            if (data && data.code === '200') {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        }).catch(() => {})
-      },
-      readHandle (id) {
-        if (!id) return
-        this.$confirm(`确定只读?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`/biz-service/product/read`),
-            method: 'POST',
-            data: {id: id}
-          }).then(({data}) => {
-            if (data && data.code === '200') {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        }).catch(() => {})
-      },
-      writeHandle (id) {
-        if (!id) return
-        this.$confirm(`确定读写?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`/biz-service/product/write`),
-            method: 'POST',
-            data: {id: id}
-          }).then(({data}) => {
-            if (data && data.code === '200') {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        }).catch(() => {})
-      },
-      syncHandle (id) {
-        if (!id) return
-        this.$confirm(`确定同步仓库?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`/biz-service/product/synchronization`),
-            method: 'POST',
-            data: {id: id}
-          }).then(({data}) => {
-            if (data && data.code === '200') {
-              this.$message({
-                message: '操作成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.getDataList()
-                }
-              })
-            } else {
-              this.$message.error(data.msg)
-            }
-          })
-        }).catch(() => {})
-      },
-      importFromExcel () {
-        this.importVisible = true
-      },
-      handleUpload (file) {
-        if (file == null) {
-          this.$message.error('请上传清单文件')
-          return
-        }
-
-        this.importLoading = true
-
-        const formData = new FormData()
-        formData.append('importFile', file.file)
+      }).catch(() => { })
+    },
+    writeHandle(id) {
+      if (!id) return
+      this.$confirm(`确定读写?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         this.$http({
-          url: this.$http.adornUrl(`/biz-service/product/importExcel`),
+          url: this.$http.adornUrl(`/biz-service/product/write`),
           method: 'POST',
-          data: formData,
-          timeout: 0
-        }).then(({data}) => {
-          this.importLoading = false
+          data: { id: id }
+        }).then(({ data }) => {
           if (data && data.code === '200') {
             this.$message({
-              message: '导入成功',
+              message: '操作成功',
               type: 'success',
               duration: 1500,
               onClose: () => {
-                this.importVisible = false
+                this.getDataList()
               }
             })
           } else {
             this.$message.error(data.msg)
           }
         })
-      },
-          // 上传
-      submitUpload () {
-        this.$refs.upload.submit()
-      },
-          // 移除
-      handleRemove (file, fileList) {
-        this.$emit('input', fileList)
-      },
-      templateDownload () {
-        location.href = this.$http.adornUrl(`/biz-service/product/template/download?_token=${Vue.cookie.get('token')}`)
-      },
-      loadingData (row, treeNode, resolve) {
-        if (!this.treeMap.has(row.productId)) {
-          this.treeMap.set(row.productId, {row, treeNode, resolve})
-        }
-
-        console.log(row, treeNode, resolve)
-        getChildren(row.productId).then(({data}) => {
+      }).catch(() => { })
+    },
+    syncHandle(id) {
+      if (!id) return
+      this.$confirm(`确定同步仓库?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`/biz-service/product/synchronization`),
+          method: 'POST',
+          data: { id: id }
+        }).then(({ data }) => {
           if (data && data.code === '200') {
-            data.data.forEach(item => {
-              if (item.attachList2 && item.attachList2.length > 0) {
-                item.simplePic = downloadUrl + item.attachList2[0].url
-              } else {
-                item.simplePic = ''
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
               }
             })
-            row.children = data.data
-            resolve(data.data)
           } else {
             this.$message.error(data.msg)
           }
         })
-      },
-      handleExpandChange (row, expanded) {
-        // console.log(row, expanded)
-        if (expanded) {
-          this.expandedRowKeys.push(row.productId)
+      }).catch(() => { })
+    },
+    importFromExcel() {
+      this.importVisible = true
+    },
+    handleUpload(file) {
+      if (file == null) {
+        this.$message.error('请上传清单文件')
+        return
+      }
+
+      this.importLoading = true
+
+      const formData = new FormData()
+      formData.append('importFile', file.file)
+      this.$http({
+        url: this.$http.adornUrl(`/biz-service/product/importExcel`),
+        method: 'POST',
+        data: formData,
+        timeout: 0
+      }).then(({ data }) => {
+        this.importLoading = false
+        if (data && data.code === '200') {
+          this.$message({
+            message: '导入成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.importVisible = false
+            }
+          })
         } else {
-          const index = this.expandedRowKeys.indexOf(row.productId)
-          if (index !== -1) {
-            this.expandedRowKeys.splice(index, 1)
-          }
+          this.$message.error(data.msg)
         }
-      },
-      openDetail (row, column, event) {
+      })
+    },
+    // 上传
+    submitUpload() {
+      this.$refs.upload.submit()
+    },
+    // 移除
+    handleRemove(file, fileList) {
+      this.$emit('input', fileList)
+    },
+    templateDownload() {
+      location.href = this.$http.adornUrl(`/biz-service/product/template/download?_token=${Vue.cookie.get('token')}`)
+    },
+    loadingData(row, treeNode, resolve) {
+      if (!this.treeMap.has(row.productId)) {
+        this.treeMap.set(row.productId, { row, treeNode, resolve })
+      }
+
+      // console.log(row, treeNode, resolve)
+      getChildren(row.productId).then(({ data }) => {
+        if (data && data.code === '200') {
+          data.data.forEach(item => {
+            if (item.attachList2 && item.attachList2.length > 0) {
+              item.simplePic = downloadUrl + item.attachList2[0].url
+            } else {
+              item.simplePic = ''
+            }
+          })
+          row.children = data.data
+          resolve(data.data)
+        } else {
+          this.$message.error(data.msg)
+        }
+      })
+    },
+    handleExpandChange(row, expanded) {
+      // console.log(row, expanded)
+      if (expanded) {
+        this.expandedRowKeys.push(row.productId)
+      } else {
         const index = this.expandedRowKeys.indexOf(row.productId)
         if (index !== -1) {
           this.expandedRowKeys.splice(index, 1)
-        } else {
-          this.expandedRowKeys.push(row.productId)
         }
+      }
+    },
+    openDetail(row, column, event) {
+      const index = this.expandedRowKeys.indexOf(row.productId)
+      if (index !== -1) {
+        this.expandedRowKeys.splice(index, 1)
+      } else {
+        this.expandedRowKeys.push(row.productId)
+      }
 
-        if (event.currentTarget.querySelector('.el-table__expand-icon')) {
-          event.currentTarget.querySelector('.el-table__expand-icon').click()
-        }
+      if (event.currentTarget.querySelector('.el-table__expand-icon')) {
+        event.currentTarget.querySelector('.el-table__expand-icon').click()
       }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-/deep/ .product-management  .el-table__row--level-1 > td{
+/deep/ .product-management .el-table__row--level-1>td {
   background-color: #5e616444;
 }
 </style>