CostumingPlatform/ant-design-vue-jeecg/src/views/process/modules/ZyClothsComponentListDetail.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.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>