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

<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>