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">
      <a-spin :spinning="confirmLoading">
      <p class="title">制衣部件详情</p>
      <a-descriptions title="" bordered>
        <a-descriptions-item label="企业">{{model.enterpriseId}}</a-descriptions-item>
        <a-descriptions-item label="服装类型">{{model.clothsTypeId}}</a-descriptions-item>
        <a-descriptions-item label="部件名称">{{model.partsName}}</a-descriptions-item>
        <a-descriptions-item label="模块">{{model.modularId}}</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" rowKey="id" bordered :pagination="false">
      </a-table>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
  // 部件
  // 工序
  // 是否瓶颈工序
  // 创建时间
  const columns1 = [
    {
      title:'索引',
      customRender:(text, record, index)=>index+1,
      align:'center'
    },
    {
      title: '部件',
      dataIndex: 'componentId',
      key: 'componentId',
      align:'center'
    },
    {
      title: '工序',
      dataIndex: 'processId',
      key: 'processId',
      align:'center'
    },
    {
      title: '是否瓶颈工序',
      dataIndex: 'bottleneck',
      key: 'bottleneck',
      align:'center'
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      align:'center'
    },
  ];

  export default {
    name: 'ZyClothsComponentListDetail',//此处填组件名称
    data () {
      return {
        visible: false,
        confirmLoading:true,
        model:{
        },
        data1:[],
        columns1,
      }
    },
    methods: {
      showModal(id) {
        this.visible = true;
        this.$http.get('/base/zyClothsComponent/detail?id='+id).then(
          res=>{
            this.model = res.result.zyClothsComponent
            this.data1 = res.result.zyProcessComponents
            this.confirmLoading = false
            // this.model = res.result.zyClothsComponent
            // this.ProcessData = res.result.zyProcess
            // this.basicActionData = res.result.zyClothActions
            // this.accessoriesData = res.result.zyFabrics
            // this.fabricData = res.result.zyAccessories
            console.log('工序详情页')
            console.log(res.result)
            // console.log(this.data)
            // console.log(this.accessoriesData)
            // console.log(this.fabricData)
            // this.img = "http://10.100.200.112/jeecg-boot/sys/common/static/"+this.data.image;
            // this.mp4 = "http://10.100.200.112/jeecg-boot/sys/common/static/"+this.data.vedio;
          }
        )
      },
      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>