制衣部件详情

ant-design-vue-jeecg/src/views/process/ZyClothsComponentList.vue

@@ -100,6 +100,7 @@
 
     <zy-cloths-component-modal ref="modalForm" @ok="modalFormOk"></zy-cloths-component-modal>
     <ZyProcessComponentList ref="ZyProcessComponentList"></ZyProcessComponentList>
+    <ZyClothsComponentListDetail ref="ZyClothsComponentListDetail"></ZyClothsComponentListDetail>
   </a-card>
 </template>
 
@@ -111,14 +112,15 @@
   import ZyClothsComponentModal from './modules/ZyClothsComponentModal'
   import ZyProcessComponentList from "@views/process/ZyProcessComponentList"
   import {filterMultiDictText} from '@/components/dict/JDictSelectUtil';
-
+import ZyClothsComponentListDetail from './modules/ZyClothsComponentListDetail'
 
   export default {
     name: 'ZyClothsComponentList',
     mixins:[JeecgListMixin, mixinDevice],
     components: {
       ZyProcessComponentList,
-      ZyClothsComponentModal
+      ZyClothsComponentModal,
+      ZyClothsComponentListDetail
     },
     data () {
       return {
@@ -239,6 +241,9 @@
         fieldList.push({type:'string',value:'modularId',text:'模块',dictCode:'zy_cloths_modular,modular_name,id'})
         fieldList.push({type:'string',value:'enterpriseId',text:'企业',dictCode:''})
         this.superFieldList = fieldList
+      },
+      handleDetail(record){
+        this.$refs.ZyClothsComponentListDetail.showModal(record)
       }
     }
   }

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

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <a-modal
+      title="制衣部件详情"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :width='1000'
+      @ok="handleOk"
+      @cancel="handleCancel">
+      <p class="title">制衣部件详情</p>
+      <a-descriptions title="" bordered>
+        <a-descriptions-item label="企业">{{model.enterpriseId_dictText}}</a-descriptions-item>
+        <a-descriptions-item label="服装类型">{{model.clothsTypeId_dictText}}</a-descriptions-item>
+        <a-descriptions-item label="部件名称">{{model.partsName}}</a-descriptions-item>
+        <a-descriptions-item label="模块">{{model.modularId_dictText}}</a-descriptions-item>
+        <a-descriptions-item label="描述" :span="2">{{model.description}}</a-descriptions-item>
+        <a-descriptions-item label="图片" :span="3">
+          <img v-if="model.pictureUrl"  :src="model.pictureUrl" alt="无法显示"></img>
+          <span v-else>暂无图片</span>
+        </a-descriptions-item>
+      </a-descriptions>
+      <p class="title">部件工序详情</p>
+      <a-table :columns="columns1" :data-source="data1" bordered :pagination="false">
+      </a-table>
+    </a-modal>
+  </div>
+</template>
+<script>
+  // 部件
+  // 工序
+  // 是否瓶颈工序
+  // 创建时间
+  const columns1 = [
+    {
+      title:'索引',
+      customRender:(text, record, index)=>index+1,
+      align:'center'
+    },
+    {
+      title: '部件',
+      dataIndex: 'nums',
+      key: 'nums',
+      align:'center'
+    },
+    {
+      title: '工序',
+      dataIndex: 'modularId_dictText',
+      key: 'modularId_dictText',
+      align:'center'
+    },
+    {
+      title: '是否瓶颈工序',
+      dataIndex: 'partsName',
+      key: 'partsName',
+      align:'center'
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      dataIndex: 'createTime',
+      align:'center'
+    },
+  ];
+  const data1 = [
+    {
+      key: '1',
+      nums:'gfhjf',
+      modularId_dictText:'1-3合后育克',
+      partsName:'是',
+      createTime:'2022-12-06 19:00:07'
+    },
+    {
+      key: '2',
+      nums:'aaff',
+      modularId_dictText:'1-3合后育克',
+      partsName:'否',
+      createTime:'2022-12-06 18:30:49'
+    },
+    {
+      key: '3',
+      nums:'test01',
+      modularId_dictText:'1-3合后育克',
+      partsName:'否',
+      createTime:'2022-12-06 09:07:05'
+    }
+  ]
+  export default {
+    name: 'ZyClothsComponentListDetail',//此处填组件名称
+    data () {
+      return {
+        visible: false,
+        confirmLoading: false,
+        model:{
+        },
+        data1,
+        columns1,
+      }
+    },
+    methods: {
+      showModal(record) {
+        this.visible = true;
+        this.model = record
+        console.log('record')
+        console.log(record)
+      },
+      handleOk(e) {
+        this.confirmLoading = true;
+        setTimeout(() => {
+          this.visible = false;
+          this.confirmLoading = false;
+        }, 1);
+      },
+      handleCancel(e) {
+        this.visible = false;
+      },
+    },
+  }
+</script >
+<style scoped>
+  .title{
+    font-size: 18px;
+    margin: 1em 0;
+    font-weight: bold;
+  }
+</style>