20220914-syy-辅料管理

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

@@ -1,34 +1,45 @@
 <template>
   <div>
-    <div v-for="(item,index) in tableModel" :key="index">
+<!--    <div v-for="(item,index) in tableModel" :key="index">-->
-      <h3>辅料{{index+1}}</h3>
+<!--      <h3>辅料{{index+1}}</h3>-->
-      <div style="padding: 15px 25px;display: flex;justify-content: space-between">
+      <div style="padding: 15px 25px;">
-<!--    <img :src="img == ''?img1:img" style="width:30%;">-->
+        <el-descriptions class="margin-top" :column="3" border style="margin-top: 50px">
-<!--    <video v-if="mp4 != ''" :src="mp4" style="border:1px solid #d9d9d9;width:30%;"/>-->
+          <el-descriptions-item>
-<!--    <p v-else style="padding-top: 20px"> 暂无视频</p>-->
+            <template slot="label"><i class="el-icon-receiving"></i>类型id</template>
-    <table border="1" style="font-size:14px;" class="table" >
+            {{tableModel.typeId}}
-      <tr>
+          </el-descriptions-item>
-        <td style="text-align: center">编号:</td>
+          <el-descriptions-item>
-        <td>{{item.nums}}</td>
+            <template slot="label"><i class="el-icon-coin"></i>编号</template>
-        <td style="text-align: center">名称:</td>
+            {{tableModel.nums}}
-        <td>{{item.contents}}</td>
+          </el-descriptions-item>
-        <td style="text-align: center">图片:</td>
+          <el-descriptions-item>
-        <td>{{item.picture}}</td>
+            <template slot="label"><i class="el-icon-postcard"></i>名称</template>
-        <td style="text-align: center">材质:</td>
+            {{tableModel.contents}}
-        <td>{{item.material}}</td>
+          </el-descriptions-item>
-      </tr>
+          <el-descriptions-item>
-      <tr>
+            <template slot="label"><i class="el-icon-copy-document"></i>图片</template>
-        <td style="text-align: center">规格:</td>
+            {{tableModel.picture}}
-        <td>{{item.specs}}</td>
+          </el-descriptions-item>
-        <td style="text-align: center">库存量:</td>
+          <el-descriptions-item>
-        <td>{{item.store}}</td>
+            <template slot="label"><i class="el-icon-price-tag"></i>材质</template>
-        <td style="text-align: center">供货商:</td>
+            {{tableModel.material}}
-        <td colspan="3">{{item.supplierInfo}}</td>
+          </el-descriptions-item>
-      </tr>
+          <el-descriptions-item>
-    </table>
+            <template slot="label"><i class="el-icon-files"></i>规格</template>
-  </div>
+            {{tableModel.specs}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"><i class="el-icon-takeaway-box"></i>库存量</template>
+            {{tableModel.store}}
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template slot="label"><i class="el-icon-location-outline"></i>供货商</template>
+            {{tableModel.supplierInfo}}
+          </el-descriptions-item>
+        </el-descriptions>
   </div>
   </div>
+<!--  </div>-->
 </template>
 <script>
   export default {
@@ -50,12 +61,15 @@
     watch: {
       //正确给 cData 赋值的 方法
       model: function(newVal,oldVal){
-        if(Array.isArray(newVal)){
+        // if(Array.isArray(newVal)){
-          this.tableModel = newVal;
+        //   this.tableModel = newVal;
-        }else{
+        // }else{
-          this.tableModel.push(newVal)
+          // this.tableModel.push(newVal)
-        }
+          this.tableModel= newVal
-        newVal && this.getTableModel();
+          console.log('组件页面')
+          console.log(this.tableModel)
+        // }
+        // newVal && this.getTableModel();
       }
     },
     methods: {
@@ -69,4 +83,6 @@
   .table{border-color:#d9d9d9;border-radius: 3px}
   .table td{padding: 10px 20px;max-width: 380px;}
   .table td span{color: #333}
+   /deep/ .ant-modal-body{min-height: 450px;}
+  .margin-top i{margin-right: 5px}
 </style>

ant-design-vue-jeecg/src/views/erp/accessories/ZyAccessoriesList.vue

@@ -75,7 +75,7 @@
             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
             <a-menu slot="overlay">
               <a-menu-item>
-                <a @click="handleDetail(record)">详情</a>
+                <a @click="handleDetail(record.id)">详情</a>
               </a-menu-item>
               <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
@@ -90,6 +90,7 @@
     </div>
 
     <zy-accessories-modal ref="modalForm" @ok="modalFormOk"></zy-accessories-modal>
+    <ZyAccessoriesFormDetail ref="ZyAccessoriesFormDetail"></ZyAccessoriesFormDetail>
   </a-card>
 </template>
 
@@ -99,12 +100,13 @@
   import { mixinDevice } from '@/utils/mixin'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import ZyAccessoriesModal from './modules/ZyAccessoriesModal'
+  import ZyAccessoriesFormDetail from './modules/ZyAccessoriesFormDetail'
 
   export default {
     name: 'ZyAccessoriesList',
     mixins:[JeecgListMixin, mixinDevice],
     components: {
-      ZyAccessoriesModal
+      ZyAccessoriesModal,ZyAccessoriesFormDetail
     },
     data () {
       return {
@@ -176,7 +178,7 @@
           deleteBatch: "/accessories/zyAccessories/deleteBatch",
           exportXlsUrl: "/accessories/zyAccessories/exportXls",
           importExcelUrl: "accessories/zyAccessories/importExcel",
-          
+
         },
         dictOptions:{},
         superFieldList:[],
@@ -204,6 +206,9 @@
         fieldList.push({type:'int',value:'store',text:'库存量'})
         fieldList.push({type:'string',value:'supplierInfo',text:'供货商信息'})
         this.superFieldList = fieldList
+      },
+      handleDetail(id){
+        this.$refs.ZyAccessoriesFormDetail.showModal(id)
       }
     }
   }

ant-design-vue-jeecg/src/views/erp/accessories/modules/ZyAccessoriesFormDetail.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <a-modal
+      title="辅料管理-详情"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :width='1100'
+      @ok="handleOk"
+      @cancel="handleCancel"
+    >
+      <h1 style="text-align: center;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px;font-size: 22px;">黄淮学院服装智能制造管理平台 - <span>辅料管理</span></h1>
+<!--      <el-descriptions class="margin-top" :column="3" border style="margin-top: 50px">-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-receiving"></i>类型id</template>-->
+<!--          {{model.typeId}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-coin"></i>编号</template>-->
+<!--          {{model.nums}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-postcard"></i>名称</template>-->
+<!--          {{model.contents}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-copy-document"></i>图片</template>-->
+<!--          {{model.picture}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-price-tag"></i>材质</template>-->
+<!--          {{model.material}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-files"></i>规格</template>-->
+<!--          {{model.specs}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-takeaway-box"></i>库存量</template>-->
+<!--          {{model.store}}-->
+<!--        </el-descriptions-item>-->
+<!--        <el-descriptions-item>-->
+<!--          <template slot="label"><i class="el-icon-location-outline"></i>供货商</template>-->
+<!--          {{model.supplierInfo}}-->
+<!--        </el-descriptions-item>-->
+<!--      </el-descriptions>-->
+      <processFabric :model="model"></processFabric>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+
+  import { httpAction, getAction } from '@/api/manage'
+  import { validateDuplicateValue } from '@/utils/util'
+import processFabric from '@/components/procedure/processFabric'
+  export default {
+    name: 'ZyAccessoriesFormDetail',
+    components: {
+      processFabric
+    },
+    data () {
+      return {
+        model:{
+         },
+        visible: false,
+        confirmLoading: false,
+        validatorRules: {
+        },
+      }
+    },
+    methods:{
+      showModal(id) {
+        this.visible = true;
+        this.$http.get('/accessories/zyAccessories/queryById?id='+id).then(
+          res=>{
+            this.model = res.result
+            console.log('详情页面')
+            console.log(this.model)
+          })
+        },
+      handleOk() {
+        this.ModalText = 'The modal will be closed after two seconds';
+        this.confirmLoading = true;
+        setTimeout(() => {
+          this.visible = false;
+          this.confirmLoading = false;
+        }, 1);
+      },
+      handleCancel() {
+        this.visible = false;
+      },
+    }
+  }
+</script>
+<style scoped>
+  /deep/ .ant-modal-body{min-height: 450px;}
+  .margin-top i{margin-right: 5px}
+</style>