CostumingPlatform/ant-design-vue-jeecg/src/views/process/modules/ZyClothsModularListDetail.vue

<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.nums}}</a-descriptions-item>
        <a-descriptions-item label="模块名称">{{model.modularName}}</a-descriptions-item>
        <a-descriptions-item label="服装类型">{{model.clothsTypeId_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>
      <p  class="title">模块工序详情</p>
      <a-table :columns="columns2" :data-source="data2" 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:'tttt',
      modularId_dictText:'tttt',
      partsName:'大袖衩',
      createTime:'2022-12-06 19:00:07'
    },
    {
      key: '2',
      nums:'aaff',
      modularId_dictText:'tttt',
      partsName:'外片',
      createTime:'2022-12-06 18:30:49'
    },
    {
      key: '3',
      nums:'test01',
      modularId_dictText:'tttt',
      partsName:'大片',
      createTime:'2022-12-06 09:07:05'
    }
  ]
  const columns2 = [
    {
      title:'索引',
      customRender:(text, record, index)=>index+1,
      align:'center'
    },
    {
      title: '模块名称',
      dataIndex: 'modularId_dictText',
      key: 'modularId_dictText',
      align:'center'
    },
    {
      title: '工序名称',
      dataIndex: 'processId_dictText',
      key: 'processId_dictText',
      align:'center'
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      align:'center'
    },
  ];
  const data2 = [
    {
      key: '1',
      modularId_dictText:'tttt',
      processId_dictText:'1-3合后育克',
      createTime:'2022-12-06 19:00:07'
    },
    {
      key: '2',
      modularId_dictText:'tttt',
      processId_dictText:'模板运袋盖',
      createTime:'2022-12-06 18:30:49'
    },
    {
      key: '3',
      modularId_dictText:'tttt',
      processId_dictText:'1-4辑后育克0.1cm明线',
      createTime:'2022-12-06 09:07:05'
    }
  ]
  export default {
    name: 'ZyClothsModularListDetail',//此处填组件名称
    data () {
      return {
        visible: false,
        confirmLoading: false,
        model:{
        },
        data1,
        columns1,
        data2,
        columns2,
      }
    },
    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>