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">
      <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.nums}}</a-descriptions-item>
        <a-descriptions-item label="模块名称">{{model.modularName}}</a-descriptions-item>
        <a-descriptions-item label="服装类型">{{model.clothsTypeId}}</a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">{{model.description}}</a-descriptions-item>
        <a-descriptions-item label="图片" :span="3">
          <img v-if="img"  :src="img" 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>
      <p  class="title">模块工序详情</p>
      <a-table :columns="columns2" :data-source="data2" 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: 'nums',
      key: 'nums',
      align:'center'
    },
    {
      title: '模块名称',
      // dataIndex: 'modularId_dictText',
      // key: 'modularId_dictText',
      dataIndex: 'modularId',
      key: 'modularId',
      align:'center'
    },
    {
      title: '部件名称',
      dataIndex: 'partsName',
      key: 'partsName',
      align:'center'
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      align:'center'
    },
  ];
  const columns2 = [
    {
      title:'索引',
      customRender:(text, record, index)=>index+1,
      align:'center'
    },
    {
      title: '模块名称',
      dataIndex: 'modularId',
      key: 'modularId',
      align:'center'
    },
    {
      title: '工序名称',
      dataIndex: 'processId',
      key: 'processId',
      align:'center'
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      align:'center'
    },
  ];
  export default {
    name: 'ZyClothsModularListDetail',//此处填组件名称
    data () {
      return {
        visible: false,
        model:{
        },
        data1:[],
        columns1,
        data2:[],
        columns2,
        img:'',
        mp4:'',
        confirmLoading:true
      }
    },
    methods: {
      showModal(id) {
        this.visible = true;
        // this.model = record
        this.$http.get('/base/zyClothsModular/detail?id='+id).then(
          res=>{
            // this.data = res.result
            this.model = res.result.zyClothsModular
            this.data1 = res.result.zyClothsModularComponents
            this.data2 = res.result.zyProcessModularVos
            this.confirmLoading = false
            // this.ProcessData = res.result.zyProcess
            // this.basicActionData = res.result.zyClothActions
            // this.accessoriesData = res.result.zyFabrics
            // this.fabricData = res.result.zyAccessories

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