款式详情

ant-design-vue-jeecg/src/views/zyclothsstyle/ZyClothsStyleList.vue

@@ -131,21 +131,23 @@
     </div>
 
     <zy-cloths-style-modal ref="modalForm" @ok="modalFormOk"></zy-cloths-style-modal>
+    <ZyClothsStyleListDetail ref="ZyClothsStyleListDetail"></ZyClothsStyleListDetail>
   </a-card>
 </template>
 
 <script>
 
-import '@/assets/less/TableExpand.less'
+  import '@/assets/less/TableExpand.less'
-import {mixinDevice} from '@/utils/mixin'
+  import {mixinDevice} from '@/utils/mixin'
-import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
-import ZyClothsStyleModal from './modules/ZyClothsStyleModal'
+  import ZyClothsStyleModal from './modules/ZyClothsStyleModal'
+  import ZyClothsStyleListDetail from './modules/ZyClothsStyleListDetail'
 
-export default {
+  export default {
     name: 'ZyClothsStyleList',
     mixins: [JeecgListMixin, mixinDevice],
     components: {
-    ZyClothsStyleModal
+      ZyClothsStyleModal,ZyClothsStyleListDetail
     },
     data() {
       return {
@@ -162,11 +164,7 @@ export default {
               return parseInt(index) + 1;
             }
           },
-        {
+
-          title: '服装类型名称',
-          align: "center",
-          dataIndex: 'typeName'
-        },
           {
             title: '款式名称',
             align: "center",
@@ -302,6 +300,10 @@ export default {
           },
         });
       },
+      // 详情
+      handleDetail(record){
+        this.$refs.ZyClothsStyleListDetail.showModal(record)
+      },
       getSuperFieldList() {
         let fieldList = [];
         fieldList.push({
@@ -330,8 +332,8 @@ export default {
         this.superFieldList = fieldList
       }
     }
-}
+  }
 </script>
 <style scoped>
-@import '~@assets/less/common.less';
+  @import '~@assets/less/common.less';
 </style>

ant-design-vue-jeecg/src/views/zyclothsstyle/modules/ZyClothsStyleListDetail.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <a-modal
+      title="服装款式详情"
+      :visible="visible"
+      :confirm-loading="confirmLoading"
+      :width='1000'
+      @ok="handleOk"
+      @cancel="handleCancel">
+<!--      <table border="1" style="width: 98%;font-size:14px;margin:30px auto 0" class="table">-->
+<!--        <tr>-->
+<!--          <td><span>款式名称：</span>tttt</td>-->
+<!--          <td><span>款式编号：</span>QIYE80301100000130</td>-->
+<!--          <td><span>款式规格：</span>123</td>-->
+<!--          <td><span>款式形式：</span>预制</td>-->
+<!--        </tr>-->
+<!--        <tr>-->
+<!--          <td><span>企业：</span>黄淮服装智能制造中心</td>-->
+<!--          <td><span>款式创建时间：</span>2022-12-06 10:02:59</td>-->
+<!--          &lt;!&ndash;          模块&ndash;&gt;-->
+<!--          <td><span>服装类型：</span>tttt</td>-->
+<!--          <td><span>模块编号：</span>QIYE80301100000130</td>-->
+<!--        </tr>-->
+<!--        <tr>-->
+<!--          <td><span>模块名称：</span>2</td>-->
+<!--          <td><span>模块创建时间：</span>2022-12-06 10:02:59</td>-->
+<!--          &lt;!&ndash;          面料&ndash;&gt;-->
+<!--          <td><span>面料编号：</span>2</td>-->
+<!--          <td><span>面料名称：</span>2A01</td>-->
+<!--        </tr>-->
+<!--        <tr>-->
+<!--          <td><span>面料创建时间：</span>2022-12-06 10:02:59</td>-->
+<!--          &lt;!&ndash;          辅料&ndash;&gt;-->
+<!--          <td><span>辅料名称：</span>2A01</td>-->
+<!--          <td><span>辅料创建时间：</span>2022-12-06 10:02:59</td>-->
+<!--          &lt;!&ndash;          工序&ndash;&gt;-->
+<!--          <td><span>工序名称：</span>2A01</td>-->
+<!--        </tr>-->
+<!--        <tr>-->
+<!--          <td><span>工序创建时间：</span>2022-12-06 10:02:59</td>-->
+
+<!--          <td><span>面料编号：</span>2</td>-->
+<!--          <td><span>面料名称：</span>2A01</td>-->
+<!--          <td><span>面料名称：</span>2A01</td>-->
+<!--        </tr>-->
+
+<!--      </table>-->
+      <h3 style="width: 98%;;margin:0px auto">款式详情</h3>
+      <a-table  style="width: 98%;font-size:14px;margin:10px auto" :columns="columns1" :data-source="data1" bordered :pagination="false">
+
+      </a-table>
+      <h3 style="width: 98%;;margin:20px auto 0">管理模块详情</h3>
+
+      <a-table style="width: 98%;font-size:14px;margin:10px auto 0" :columns="columns" :data-source="data" bordered :pagination="false">
+
+      </a-table>
+    </a-modal>
+  </div>
+</template>
+<script>
+  const columns1 = [
+    {
+      title: '款式名称',
+      dataIndex: 'a',
+      key: 'a',
+      align:'center'
+    },
+    {
+      title: '款式编号',
+      dataIndex: 'b',
+      key: 'b',
+      align:'center'
+    },
+    {
+      title: '款式规格',
+      dataIndex: 'c',
+      key: 'c',
+      align:'center'
+    },
+    {
+      title: '款式形式',
+      dataIndex: 'd',
+      key: 'd',
+      align:'center'
+    },
+    {
+      title: '企业',
+      dataIndex: 'e',
+      key: 'e',
+      align:'center'
+    },
+    {
+      title: '款式创建时间',
+      dataIndex: 'f',
+      key: 'f',
+      align:'center'
+    },
+  ];
+  const data1 = [
+    {
+      key:'1',
+      a:'tttt',
+      b:'QIYE80301100000130',
+      c:'123',
+      d:'预制',
+      e:'黄淮服装智能制造中心',
+      f:'2022-12-06 10:02:59',
+    }
+  ];
+  const columns = [
+    {
+      title: '管理模块',
+      dataIndex: 'a',
+      key: 'a',
+      align:'center'
+
+    },
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+      align:'center'
+    },
+    {
+      title: '编号',
+      dataIndex: 'age',
+      key: 'age',
+      align:'center'
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'address',
+      key: 'address',
+      align:'center'
+    }
+  ];
+
+  const data = [
+    {
+      key: '1',
+      a:'款式',
+      name: 'tttt',
+      age: 'QIYE80301100000130',
+      address: '2022-12-05 21:11:32',
+    },
+    {
+      key: '2',
+      a:'模块',
+      name: 'tttt',
+      age: 'QIYE80301100000130',
+      address: '2022-12-05 21:11:32',
+    },    {
+      key: '3',
+      a:'面料',
+      name: '白色素面布',
+      age: '1001',
+      address: '2022-12-05 21:11:32',
+    },
+    {
+      key: '4',
+      a:'辅料',
+      name: '无纺衬双面衬',
+      age: '无',
+      address: '2022-12-05 21:11:32',
+    },
+    {
+      key: '5',
+      a:'型号',
+      name: '无',
+      age: '无',
+      address: '无',
+    },
+    {
+      key: '6',
+      a:'工序',
+      name: '1-3合后育克',
+      age: '无',
+      address: '2022-12-05 21:11:32',
+    }
+  ];
+
+  export default {
+    name: 'ZyClothsStyleListDetail',//此处填组件名称
+    data () {
+      return {
+        visible: false,
+        confirmLoading: false,
+        model:{
+        },
+        data,
+        columns,
+        data1,
+        columns1,
+      }
+    },
+    methods: {
+      showModal(record) {
+        this.visible = true;
+        this.model = record
+        console.log('this.model')
+        console.log(this.model)
+      },
+      handleOk(e) {
+        this.confirmLoading = true;
+        setTimeout(() => {
+          this.visible = false;
+          this.confirmLoading = false;
+        }, 1);
+      },
+      handleCancel(e) {
+        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>