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>

      <h3 style="width: 98%;;margin:20px auto 0">管理面料</h3>
      <a-table style="width: 98%;font-size:14px;margin:10px auto 0" :columns="columns2" :data-source="data2" 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="columns3" :data-source="data3" 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="columns4" :data-source="data4" 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="columns5" :data-source="data5" 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: '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 data = [
    {
      key: '1',
      a:'女衬衫',
      b:'a000400000014',
      c:'test010',
      d:'QIYE80301100000021',
      e:'tttt',
      f:'2022-12-06 10:02:59',
    },
    {
      key: '2',
      a:'女衬衫',
      b:'a000400000014',
      c:'test010',
      d:'a000180301100000022',
      e:'袖口模块A1',
      f:'2022-12-06 10:02:59',
    },    {
      key: '3',
      a:'女衬衫',
      b:'a000400000014',
      c:'test010',
      d:'b0005',
      e:'领子模块',
      f:'2022-12-06 10:02:59',
    }
  ];
  const columns2 = [
    {
      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 data2 = [
    {
      key: '1',
      a:'女衬衫',
      b:'a000400000014',
      c:'test010',
      d:'1002',
      e:'面料2',
      f:'2022-12-06 10:02:59',
    },
    {
      key: '2',
      a:'女衬衫',
      b:'a000400000014',
      c:'test010',
      d:'1003',
      e:'面料3',
      f:'2022-12-06 10:02:59',
    }
  ];
  const columns3 = [
    {
      title: '服装类型名称',
      dataIndex: 'a',
      key: 'a',
      align:'center'
    },
    {
      title: '款式名称',
      dataIndex: 'c',
      key: 'c',
      align:'center'
    },
    {
      title: '辅料名称',
      dataIndex: 'e',
      key: 'e',
      align:'center'
    },
    {
      title: '创建时间',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    }
  ];
  const data3 = [
    {
      key: '1',
      a:'女衬衫',
      c:'test010',
      e:'123',
      f:'2022-12-06 10:02:59',
    }
  ];
  const columns4 = [
    {
      title: '服装款式',
      dataIndex: 'a',
      key: 'a',
      align:'center'
    },
    {
      title: '是否默认尺码',
      dataIndex: 'c',
      key: 'c',
      align:'center'
    },
    {
      title: '型号编码',
      dataIndex: 'e',
      key: 'e',
      align:'center'
    },
    {
      title: '码数',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    },
    {
      title: '型',
      dataIndex: 'a',
      key: 'a',
      align:'center'
    },
    {
      title: '号',
      dataIndex: 'a',
      key: 'a',
      align:'center'
    },
    {
      title: '领大',
      dataIndex: 'c',
      key: 'c',
      align:'center'
    },
    {
      title: '胸围',
      dataIndex: 'e',
      key: 'e',
      align:'center'
    },
    {
      title: '袖长',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    },
    {
      title: '连肩袖长',
      dataIndex: 'e',
      key: 'e',
      align:'center'
    },
    {
      title: '总肩宽',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    },
    {
      title: '袖口',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    },
    {
      title: '腰围',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    },
    {
      title: '下摆',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    }
  ];
  const data4 = [
    {
      key: '1',
      a:'女衬衫',
      c:'test010',
      e:'123',
      f:'2022-12-06 10:02:59',
    }
  ];
  const columns5 = [
    {
      title: '款式名称',
      dataIndex: 'a',
      key: 'a',
      align:'center'
    },
    {
      title: '工序',
      dataIndex: 'c',
      key: 'c',
      align:'center'
    },
    {
      title: '创建时间',
      dataIndex: 'f',
      key: 'f',
      align:'center'
    }
  ];
  const data5 = [
    {
      key: '1',
      a:'test010',
      c:'9',
      f:'2022-12-06 10:02:59',
    },
    {
      key: '2',
      a:'test010',
      c:'8',
      f:'2022-12-06 10:02:59',
    }
  ];
  export default {
    name: 'ZyClothsStyleListDetail',//此处填组件名称
    data () {
      return {
        visible: false,
        confirmLoading: false,
        model:{
        },
        data,
        columns,
        data1,
        columns1,
        data2,
        columns2,
        data3,
        columns3,
        columns4,
        data4,
        columns5,
        data5,
      }
    },
    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>