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

<template>
  <div>
    <a-modal
      title="标准作业指导书"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width='1400'
      @ok="handleOk"
      @cancel="handleCancel"
      style="display:flex;"
    >
      <div style="width: 96%;margin:0 auto 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 30px">
        <h1 style="text-align: center;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px">黄淮学院服装智能制造管理平台 - <span>基本工序</span></h1>
<!--        基本工序-->
        <zyProcess :data="ProcessData"></zyProcess>
      </div>
      <!--      <a-card :title="`动作`+(index+1)" v-for="(item,index) in data.zyClothAction" :key="item.id" :headStyle="headStyle">-->
      <!--        <div style="width:100%;height:20px;display:flex;font-size:18px">-->
      <!--          <table  border="1" style="width: 100%;height:50px;margin-top:-1%;" >-->
      <!--            <tr>-->
      <!--              <td style="width:20%">编号：{{item.nums}}</td>-->
      <!--              <td style="width:20%">频率：{{item.freq}}</td>-->
      <!--              <td style="width:20%">机器TMU：{{item.machineTmu}}</td>-->
      <!--              <td style="width:20%">手工TMU：{{item.machineTmu}}</td>-->
      <!--              <td style="width:20%">描述：{{item.descr}}</td>-->
      <!--            </tr>-->
      <!--          </table>-->
      <!--        </div>-->
      <!--      </a-card>-->
<!--      基础动作-->
      <div class="coin">
        <h2>基础动作</h2>
        <basicAction :model="basicActionData"></basicAction>
      </div>
      <div class="coin">
        <h2>工序面料</h2>
        <processAccessories :model="accessoriesData"></processAccessories>
      </div>
      <div class="coin">
        <h2>工序辅料</h2>
        <processFabric :model="fabricData"></processFabric>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import zyProcess from '@/components/procedure/zyProcess'
  import basicAction from '@/components/procedure/basicAction'
  import processAccessories from '@/components/procedure/processAccessories'
  import processFabric from '@/components/procedure/processFabric'
  export default {
    components:{zyProcess,basicAction,processAccessories,processFabric},
    data() {
      return{
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
        selectId:'2',
        img:'',
        img1:require('@/assets/9-2.png'),//默认图片
        mp4:'',
        data:{},
        ProcessData:{},//基本工序相关数据
        basicActionData:[],//基础动作相关数据
        accessoriesData:[],//面料相关数据
        fabricData:[],//辅料相关数据
        headStyle:{
          height:'10px'
        },
      }
    },
    created(){
    },
    methods: {
      showModal(id) {
        this.visible = true;
        this.$http.get('/base/zyProcess/queryById?id='+id).then(
          res=>{
            this.data = res.result
            this.ProcessData = res.result.zyProcess
            this.basicActionData = res.result.zyClothActions
            this.accessoriesData = res.result.zyFabrics
            this.fabricData = res.result.zyAccessories
            console.log('工序详情页')
            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() {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 1);
      },
      handleCancel() {
        this.visible = false;
      },
    },
  }
</script>
<style scoped>
  .table{border-color:#d9d9d9;border-radius: 3px}
  .table td{padding: 10px 20px;max-width: 380px;white-space:nowrap}
  .table td span{color: #333}
  .coin{width: 96%;margin:0 auto 30px;border-bottom: 1px solid #e8e8e8;}
  .coin h2{text-align: left;margin-bottom: 30px;border-bottom: 1px solid #e8e8e8;padding-bottom: 20px}
</style>