20220913-syy

ant-design-vue-jeecg/src/components/procedure/basicAction.vue

@@ -1,4 +1,7 @@
 <template>
+  <div>
+    <div v-for="(item,index) in tableModel" :key="index">
+      <h3  v-if="index>0">动作{{index+1}}</h3>
       <div style="padding: 15px 25px;display: flex;justify-content: space-between" >
         <img :src="img == ''?img1:img" style="width:30%;">
         <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>
@@ -10,44 +13,48 @@
           <!--          </tr>-->
           <tr>
             <td style="text-align: center">频率:</td>
-          <td>{{tableModel.freq}}</td>
+            <td>{{item.freq}}</td>
           </tr>
           <tr>
             <td style="text-align: center">描述:</td>
-          <td>{{tableModel.descr}}</td>
+            <td>{{item.descr}}</td>
           </tr>
           <tr>
             <td style="text-align: center">机器TMU:</td>
-          <td>{{tableModel.machineTmu}}</td>
+            <td>{{item.machineTmu}}</td>
           </tr>
           <tr>
             <td style="text-align: center">手工TMU:</td>
-          <td>{{tableModel.machineTmu}}</td>
+            <td>{{item.machineTmu}}</td>
           </tr>
           <tr>
             <td style="text-align: center">编号:</td>
-          <td>{{tableModel.nums}}</td>
+            <td>{{item.nums}}</td>
           </tr>
         </table>
       </div>
+
+    </div>
+
+  </div>
 </template>
 <script>
   export default {
     name: 'basicAction',
     // props: {
-    //   tableModel:{
+    //   model: {
     //     type: Array,
-    //     default: () =>({})
+    //     default() {
+    //       return []
     //     }
-    //   },
-    props:['tableModel'],
+    //   }},
+    props:['model'],
     data () {
       return {
-        model:{
-        },
         img:'',//图片地址
         img1:require('@/assets/9-2.png'),// 默认图片
         mp4:'',//视频地址
+        tableModel:[],
         visible: false,
         confirmLoading: false,
         validatorRules: {
@@ -55,7 +62,22 @@
       }},
     created() {
     },
-    methods: {}
+    watch: {
+      //正确给 tableModel 赋值的 方法
+      model: function(newVal,oldVal){
+        if(Array.isArray(newVal)){
+          this.tableModel = newVal;
+        }else{
+          this.tableModel.push(newVal)
+        }
+        newVal && this.getTableModel();
+      }
+    },
+    methods: {
+      getTableModel(){
+        //执行其他逻辑
+      }
+    },
       }
 </script>
 <style scoped>

ant-design-vue-jeecg/src/components/procedure/processAccessories.vue

@@ -1,36 +1,60 @@
 <template>
+  <div>
+    <div v-for="(item,index) in tableModel" :key="index">
+      <h3 v-if="index>0">面料{{index+1}}</h3>
       <div style="padding: 15px 25px;display: flex;justify-content: space-between">
-    <img :src="img == ''?img1:img" style="width:30%;">
-    <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>
-    <p v-else style="padding-top: 20px"> 暂无视频</p>
-    <table border="1" style="font-size:14px;" class="table" >
-      <tr>
-        <td style="text-align: center">工序:</td>
-        <td>{{tableModel.processId}}</td>
-      </tr>
-      <tr>
-        <td style="text-align: center">面料:</td>
-        <td>{{tableModel.accessoriesId}}</td>
-      </tr>
-    </table>
+<!--    <img :src="img == ''?img1:img" style="width:30%;">-->
+<!--    <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>-->
+<!--    <p v-else style="padding-top: 20px"> 暂无视频</p>-->
+<!--    <table border="1" style="font-size:14px;" class="table" >-->
+<!--      <tr>-->
+<!--        <td style="text-align: center">工序:</td>-->
+<!--        <td>{{item.processId}}</td>-->
+<!--      </tr>-->
+<!--      <tr>-->
+<!--        <td style="text-align: center">面料:</td>-->
+<!--        <td>{{item.accessoriesId}}</td>-->
+<!--      </tr>-->
+<!--    </table>-->
+  </div>
+  </div>
   </div>
 </template>
 <script>
   export default {
     name: 'processAccessories',
-    props:['tableModel'],
+    props:['model'],
     data () {
       return {
-        model:{
-        },
         img:'',//图片地址
         img1:require('@/assets/9-2.png'),// 默认图片
         mp4:'',//视频地址
+        tableModel:[],
         visible: false,
         confirmLoading: false,
         validatorRules: {
         },
       }},
+    created() {
+    },
+    watch: {
+      //正确给 cData 赋值的 方法
+      model: function(newVal,oldVal){
+        if(Array.isArray(newVal)){
+          this.tableModel = newVal;
+          console.log('面料组件')
+          console.log(this.tableModel)
+        }else{
+          this.tableModel.push(newVal)
+        }
+        newVal && this.getTableModel();
+      }
+    },
+    methods: {
+      getTableModel(){
+        //执行其他逻辑
+      }
+    },
   }
 </script>
 <style scoped>

ant-design-vue-jeecg/src/components/procedure/processFabric.vue

@@ -1,45 +1,68 @@
 <template>
+  <div>
+    <div v-for="(item,index) in tableModel" :key="index">
+      <h3>辅料{{index+1}}</h3>
       <div style="padding: 15px 25px;display: flex;justify-content: space-between">
-    <img :src="img == ''?img1:img" style="width:30%;">
-    <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>
-    <p v-else style="padding-top: 20px"> 暂无视频</p>
+<!--    <img :src="img == ''?img1:img" style="width:30%;">-->
+<!--    <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>-->
+<!--    <p v-else style="padding-top: 20px"> 暂无视频</p>-->
     <table border="1" style="font-size:14px;" class="table" >
       <tr>
-        <td style="text-align: center">工序:</td>
-        <td>{{tableModel.processId}}</td>
+        <td style="text-align: center">编号:</td>
+        <td>{{item.nums}}</td>
+        <td style="text-align: center">名称:</td>
+        <td>{{item.contents}}</td>
+        <td style="text-align: center">图片:</td>
+        <td>{{item.picture}}</td>
+        <td style="text-align: center">材质:</td>
+        <td>{{item.material}}</td>
       </tr>
       <tr>
-        <td style="text-align: center">辅料:</td>
-        <td>{{tableModel.fabricId}}</td>
+        <td style="text-align: center">规格:</td>
+        <td>{{item.specs}}</td>
+        <td style="text-align: center">库存量:</td>
+        <td>{{item.store}}</td>
+        <td style="text-align: center">供货商:</td>
+        <td colspan="3">{{item.supplierInfo}}</td>
       </tr>
     </table>
   </div>
+  </div>
+  </div>
 </template>
 <script>
   export default {
     name: 'processFabric',
-    props:['tableModel'],
+    props:['model'],
     data () {
       return {
-        model:{
-        },
         img:'',//图片地址
         img1:require('@/assets/9-2.png'),// 默认图片
         mp4:'',//视频地址
+        tableModel:[],
         visible: false,
         confirmLoading: false,
         validatorRules: {
         },
       }},
     created() {
-      console.log('this.tableModel')
-      console.log(this.tableModel)
     },
-    mounted() {
-      console.log('this.tableModel')
-      console.log(this.tableModel)
-
+    watch: {
+      //正确给 cData 赋值的 方法
+      model: function(newVal,oldVal){
+        if(Array.isArray(newVal)){
+          this.tableModel = newVal;
+        }else{
+          this.tableModel.push(newVal)
+        }
+        newVal && this.getTableModel();
       }
+    },
+    methods: {
+      getTableModel(){
+        //执行其他逻辑
+      }
+    },
   }
 </script>
 <style scoped>

ant-design-vue-jeecg/src/views/cloths/modules/ZyProcessAccessoriesFormDetail.vue

@@ -7,7 +7,22 @@
     @ok="handleOk"
     @cancel="handleCancel">
     <h1 style="text-align: center;margin-bottom: 50px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px;font-size: 22px">黄淮学院服装智能制造管理平台 - <span>工序面料</span></h1>
-      <processAccessories :tableModel="model"></processAccessories>
+<!--      <processAccessories :model="model"></processAccessories>-->
+      <div style="padding: 15px 25px;display: flex;justify-content: space-between">
+        <img :src="img == ''?img1:img" style="width:30%;">
+        <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>
+        <p v-else style="padding-top: 20px"> 暂无视频</p>
+        <table border="1" style="font-size:14px;" class="table" >
+          <tr>
+            <td style="text-align: center">工序:</td>
+            <td>{{model.processId}}</td>
+          </tr>
+          <tr>
+            <td style="text-align: center">面料:</td>
+            <td>{{model.accessoriesId}}</td>
+          </tr>
+        </table>
+      </div>
   </a-modal>
 </template>
 
@@ -25,6 +40,9 @@ import processAccessories from '@/components/procedure/processAccessories'
       return {
         code:'',
         id:'',
+        img:'',//图片地址
+        img1:require('@/assets/9-2.png'),// 默认图片
+        mp4:'',//视频地址
         model:{
          },
         visible:false,

ant-design-vue-jeecg/src/views/cloths/modules/ZyProcessFabricFormDetail.vue

@@ -7,7 +7,22 @@
     @ok="handleOk"
     @cancel="handleCancel">
     <h1 style="text-align: center;margin-bottom: 50px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px;font-size: 22px">黄淮学院服装智能制造管理平台 - <span>工序辅料</span></h1>
-    <processFabric :tableModel="model"></processFabric>
+<!--    <processFabric :model="model"></processFabric>-->
+    <div style="padding: 15px 25px;display: flex;justify-content: space-between">
+      <img :src="img == ''?img1:img" style="width:30%;">
+      <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>
+      <p v-else style="padding-top: 20px"> 暂无视频</p>
+      <table border="1" style="font-size:14px;" class="table" >
+        <tr>
+          <td style="text-align: center">工序:</td>
+          <td>{{model.processId}}</td>
+        </tr>
+        <tr>
+          <td style="text-align: center">面料:</td>
+          <td>{{model.fabricId}}</td>
+        </tr>
+      </table>
+    </div>
   </a-modal>
 </template>
 
@@ -25,6 +40,9 @@ import processFabric from '@/components/procedure/processFabric'
       return {
         code:'',
         id:'',
+        img:'',//图片地址
+        img1:require('@/assets/9-2.png'),// 默认图片
+        mp4:'',//视频地址
         model:{
          },
         visible:false,
@@ -44,7 +62,7 @@ import processFabric from '@/components/procedure/processFabric'
     methods: {
       showModal(id) {
         this.visible = true;
-        this.$http.get('pro/zyProcessFabric/queryById?id='+id).then(
+        this.$http.get('/pro/zyProcessFabric/queryById?id='+id).then(
           res=>{
             this.model = res.result
           }

ant-design-vue-jeecg/src/views/process/modules/ZyClothActionFormDetail.vue

@@ -7,7 +7,7 @@
     @ok="handleOk"
     @cancel="handleCancel">
     <h1 style="text-align: center;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px;">黄淮学院服装智能制造管理平台 - <span>基础动作</span></h1>
-      <basicAction :tableModel="model"></basicAction>
+      <basicAction :model="model"></basicAction>
   </a-modal>
 </template>
 
@@ -25,6 +25,7 @@ import basicAction from '@/components/procedure/basicAction'
       return {
         model:{
          },
+        id:'',
         img:'',//图片地址
         img1:require('@/assets/9-2.png'),// 默认图片
         mp4:'',//视频地址
@@ -40,6 +41,8 @@ import basicAction from '@/components/procedure/basicAction'
         this.$http.get('base/zyClothAction/queryById?id='+id).then(
           res=>{
             this.model = res.result
+            console.log('this.model')
+            console.log(this.model)
           }
         )
       },

ant-design-vue-jeecg/src/views/process/modules/ZyProcessDetail.vue

@@ -28,24 +28,28 @@
       <!--        </div>-->
       <!--      </a-card>-->
 <!--      基础动作-->
-      <div style="width: 96%;margin:0 auto 30px">
-        <h2 style="text-align: left;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px">基础动作</h2>
-        <basicAction :tableModel="basicActionData"></basicAction>
+      <div class="coin">
+        <h2>基础动作</h2>
+        <basicAction :model="basicActionData"></basicAction>
       </div>
-      <div style="width: 96%;margin:0 auto 30px">
-        <h2 style="text-align: left;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px">工序面料</h2>
-        <processFabric :tableModel="accessoriesData"></processFabric>
+      <div class="coin">
+        <h2>工序面料</h2>
+        <processAccessories :model="accessoriesData"></processAccessories>
+      </div>
+      <div class="coin">
+        <h2>工序辅料</h2>
+        <processFabric :model="fabricData"></processFabric>
       </div>
-
     </a-modal>
   </div>
 </template>
 <script>
   import zyProcess from '@/components/procedure/zyProcess'
   import basicAction from '@/components/procedure/basicAction'
+  import processAccessories from '@/components/procedure/processAccessories'
   import processFabric from '@/components/procedure/processFabric'
   export default {
-    components:{zyProcess,basicAction,processFabric},
+    components:{zyProcess,basicAction,processAccessories,processFabric},
     data() {
       return{
         ModalText: 'Content of the modal',
@@ -56,9 +60,10 @@
         img1:require('@/assets/9-2.png'),//默认图片
         mp4:'',
         data:{},
-        ProcessData:{},
-        basicActionData:[],
-        accessoriesData:[],
+        ProcessData:{},//基本工序相关数据
+        basicActionData:[],//基础动作相关数据
+        accessoriesData:[],//面料相关数据
+        fabricData:[],//辅料相关数据
         headStyle:{
           height:'10px'
         },
@@ -73,11 +78,13 @@
           res=>{
             this.data = res.result
             this.ProcessData = res.result.zyProcess
-            this.basicActionData = res.result.zyProcessAction
-            this.accessoriesData = res.result.zyProcessAccessories
-            console.log('this.data')
+            this.basicActionData = res.result.zyClothActions
+            this.accessoriesData = res.result.zyFabrics
+            this.fabricData = res.result.zyAccessories
+            console.log('工序详情页')
             console.log(this.data)
             console.log(this.accessoriesData)
+            console.log(this.fabricData)
             this.img = "http://10.100.200.112/jeecg-boot/sys/common/static/"+this.data.image;
             this.mp4 = "http://10.100.200.112/jeecg-boot/sys/common/static/"+this.data.vedio;
           }
@@ -101,4 +108,6 @@
   .table{border-color:#d9d9d9;border-radius: 3px}
   .table td{padding: 10px 20px;max-width: 380px;white-space:nowrap}
   .table td span{color: #333}
+  .coin{width: 96%;margin:0 auto 30px;border-bottom: 1px solid #e8e8e8;}
+  .coin h2{text-align: left;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px}
 </style>