diff --git a/ant-design-vue-jeecg/src/components/procedure/processFabric.vue b/ant-design-vue-jeecg/src/components/procedure/processFabric.vue
new file mode 100644
index 00000000..f06fad2f
--- /dev/null
+++ b/ant-design-vue-jeecg/src/components/procedure/processFabric.vue
@@ -0,0 +1,40 @@
+<template>
+  <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.fabricId}}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'processFabric',
+    props:['tableModel'],
+    data () {
+      return {
+        model:{
+        },
+        img:'',//图片地址
+        img1:require('@/assets/9-2.png'),// 默认图片
+        mp4:'',//视频地址
+        visible: false,
+        confirmLoading: false,
+        validatorRules: {
+        },
+      }},
+  }
+</script>
+<style scoped>
+  .table{border-color:#d9d9d9;border-radius: 3px}
+  .table td{padding: 10px 20px;max-width: 380px;}
+  .table td span{color: #333}
+</style>
\ No newline at end of file
diff --git a/ant-design-vue-jeecg/src/views/cloths/ZyProcessFabricList.vue b/ant-design-vue-jeecg/src/views/cloths/ZyProcessFabricList.vue
index 11bf8380..1aba9052 100644
--- a/ant-design-vue-jeecg/src/views/cloths/ZyProcessFabricList.vue
+++ b/ant-design-vue-jeecg/src/views/cloths/ZyProcessFabricList.vue
@@ -88,7 +88,7 @@
 
            <a-divider type="vertical" />
 
-                <a @click="handleDetail(record)">详情</a>
+                <a @click="handleDetail(record.id)">详情</a>
                       <a-divider type="vertical" />
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                   <a>删除</a>
@@ -100,6 +100,7 @@
     </div>
 
     <zy-process-fabric-modal ref="modalForm" @ok="modalFormOk"></zy-process-fabric-modal>
+    <ZyProcessFabricFormDetail ref="ZyProcessFabricFormDetail"></ZyProcessFabricFormDetail>
   </a-card>
 </template>
 
@@ -110,12 +111,12 @@
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import ZyProcessFabricModal from './modules/ZyProcessFabricModal'
   import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
-
+  import ZyProcessFabricFormDetail from './modules/ZyProcessFabricFormDetail'
   export default {
     name: 'ZyProcessFabricList',
     mixins:[JeecgListMixin, mixinDevice],
     components: {
-      ZyProcessFabricModal
+      ZyProcessFabricModal,ZyProcessFabricFormDetail
     },
     data () {
       return {
@@ -197,6 +198,9 @@
         fieldList.push({type:'string',value:'processId',text:'工序',dictCode:'zy_process,process_name,id'})
         fieldList.push({type:'string',value:'fabricId',text:'辅料',dictCode:'zy_fabric,name,id'})
         this.superFieldList = fieldList
+      },
+      handleDetail(id){
+        this.$refs.ZyProcessFabricFormDetail.showModal(id)
       }
     }
   }
diff --git a/ant-design-vue-jeecg/src/views/cloths/modules/ZyProcessFabricFormDetail.vue b/ant-design-vue-jeecg/src/views/cloths/modules/ZyProcessFabricFormDetail.vue
new file mode 100644
index 00000000..49b68453
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/cloths/modules/ZyProcessFabricFormDetail.vue
@@ -0,0 +1,70 @@
+<template>
+  <a-modal
+    title="工序辅料-详情"
+    :visible="visible"
+    :confirm-loading="confirmLoading"
+    :width='1000'
+    @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>
+  </a-modal>
+</template>
+
+<script>
+
+  import { httpAction, getAction } from '@/api/manage'
+  import { validateDuplicateValue } from '@/utils/util'
+import processFabric from '@/components/procedure/processFabric'
+  export default {
+    name: 'ZyProcessFabricFormDetail',
+    components: {
+      processFabric
+    },
+    data () {
+      return {
+        code:'',
+        id:'',
+        model:{
+         },
+        visible:false,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        confirmLoading: false,
+        validatorRules: {
+        },
+      }
+    },
+    methods: {
+      showModal(id) {
+        this.visible = true;
+        this.$http.get('pro/zyProcessFabric/queryById?id='+id).then(
+          res=>{
+            this.model = res.result
+          }
+        )
+      },
+      handleOk() {
+        this.confirmLoading = true;
+        setTimeout(() => {
+          this.visible = false;
+          this.confirmLoading = false;
+        }, 1);
+      },
+      handleCancel() {
+        this.visible = false;
+      },
+    }
+  }
+</script>
+<style scoped>
+  .table{border-color:#d9d9d9;border-radius: 3px}
+  .table td{padding: 10px 20px;max-width: 380px; }
+  .table td span{color: #333}
+</style>
\ No newline at end of file