hitch-sb-antd/src/views/repair/application-form/modules/TicketForm.vue

<template>
  <div class="main" v-show='visible'>
    <div>
      <a-button type="primary" v-print="'#print-container2'" :disabled="disabled">打印</a-button>
      <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
    </div>
    <div id="print-container2">
      <div class="title">
        <div style="font-size:26px; "><span style="font-size:32px;font-weight:700;vertical-align: middle;letter-spacing:.2em;">时代思康</span><span style="vertical-align: middle;">龙岩思康新材料有限公司</span></div>
        <div style="font-size:12px;font-weight:700; "><span style="font-size:14px;vertical-align: middle;letter-spacing:.1em;">CATL-SICONG</span><span style="vertical-align: middle;transform: scale(0.8);"> LONGYAN SICONG Advanced Materials Technology Limited</span></div>
        <div style="font-weight:700">检维修工作委托单（MSR）</div>
      </div>
      <div class="tables" >
        <table>
          <tr>
            <td colspan="3">委托单位</td>
            <td colspan="27">
              <a-radio-group v-model="value1">
                <a-radio :value="1">
                  <a-icon class="check" v-show="value1 ==1" type="check" />生产部-{{ model.sbPositionName }}
                </a-radio>
                <a-radio :value="2">
                  <a-icon class="check" v-show="value1 ==2" type="check" />研发部
                </a-radio>
                <a-radio :value="3">
                  <a-icon class="check" v-show="value1 ==3" type="check" />安环部
                </a-radio>
                <a-radio :value="4">
                  <a-icon class="check" v-show="value1 ==4" type="check" />质量部
                </a-radio>
                <a-radio :value="5">
                  <a-icon class="check" v-show="value1 ==5" type="check" />人事行政部
                </a-radio>
                <a-radio :value="6">
                  <a-icon class="check" v-show="value1 ==6" type="check" />其他
                </a-radio>
              </a-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="3">检维修单位</td>
            <td colspan="27">
              <a-radio-group v-model="value2">
                <a-radio :value="1">
                  <a-icon class="check" v-show="value2 ==1" type="check" />机械
                </a-radio>
                <a-radio :value="2">
                  <a-icon class="check" v-show="value2 ==2" type="check" />电气
                </a-radio>
                <a-radio :value="3">
                  <a-icon class="check" v-show="value2 ==3" type="check" />仪表
                </a-radio>
                <a-radio :value="4">
                  <a-icon class="check" v-show="value2 ==4" type="check" />保温保冷
                </a-radio>
                <a-radio :value="5">
                  <a-icon class="check" v-show="value2 ==5" type="check" />防腐
                </a-radio>
                <a-radio :value="6">
                  <a-icon class="check" v-show="value2 ==6" type="check" />安环
                </a-radio>
                <a-radio :value="7">
                  <a-icon class="check" v-show="value2 ==7" type="check" />压力管道
                </a-radio>
                <a-radio :value="8">
                  <a-icon class="check" v-show="value2 ==8" type="check" />其他
                </a-radio>
              </a-radio-group>
            </td>
          </tr>
          <tr>
            <td colspan="3">委修单编号</td>
            <td colspan="12">{{ this.model.repairNo }}</td>
            <td colspan="3">委托时间</td>
            <td colspan="12"> {{ this.model.callTime }}</td>
          </tr>
          <tr>
            <td colspan="3">工作优选权</td>
            <td colspan="27">
              {{ model.requireHours }}小时
<!--              <a-radio-group v-model="value3">
                <a-radio :value="1">
                  <a-icon class="check" v-show="value3 ==1" type="check" />紧急
                </a-radio>
                <a-radio :value="2">
                  <a-icon class="check" v-show="value3 ==2" type="check" />一日
                </a-radio>
                <a-radio :value="3">
                  <a-icon class="check" v-show="value3 ==3" type="check" />三日
                </a-radio>
                <a-radio :value="4">
                  <a-icon class="check" v-show="value3 ==4" type="check" />停机
                </a-radio>
                <a-radio :value="5">
                  <a-icon class="check" v-show="value3 ==5" type="check" />待机
                </a-radio>
                <a-radio :value="6">
                  <a-icon class="check" v-show="value3 ==6" type="check" />其它
                </a-radio>
              </a-radio-group>-->
            </td>
          </tr>
          <tr>
            <td colspan="3">工作类型</td>
            <td colspan="27" >
              <a-radio-group v-model="value4">
                <a-radio :value="1">
                  <a-icon class="check" v-show="value4 ==1" type="check" /><span style='font-size: 13px;'>普通作业</span>
                </a-radio>
                <a-radio :value="2">
                  <a-icon class="check" v-show="value4 ==2" type="check" /><span style='font-size: 13px;'>动火作业</span>
                </a-radio>
                <a-radio :value="3">
                  <a-icon class="check" v-show="value4 ==3" type="check" /><span style='font-size: 13px;'>受限空间作业</span>
                </a-radio>
                <a-radio :value="4">
                  <a-icon class="check" v-show="value4 ==4" type="check" /><span style='font-size: 13px;'>高处作业</span>
                </a-radio>
                <a-radio :value="5">
                  <a-icon class="check" v-show="value4 ==5" type="check" /><span style='font-size: 13px;'>吊装作业</span>
                </a-radio>
                <a-radio :value="6">
                  <a-icon class="check" v-show="value4 ==6" type="check" /><span style='font-size: 13px;'>动土作业</span>
                </a-radio>
                <a-radio :value="7">
                  <a-icon class="check" v-show="value4 ==7" type="check" /><span style='font-size: 13px;'>断路作业</span>
                </a-radio>
                <a-radio :value="8">
                  <a-icon class="check" v-show="value4 ==8" type="check" /><span style='font-size: 13px;'>设备检修作业</span>
                </a-radio>
                <a-radio :value="9">
                  <a-icon class="check" v-show="value4 ==9" type="check" /><span style='font-size: 13px;'>盲板抽堵作业</span>
                </a-radio>
              </a-radio-group></td>
          </tr>
          <tr>
            <td colspan="3">设备位号</td>
            <td colspan="9">{{ this.model.sbNo }}</td>
            <td colspan="3">设备名称</td>
            <td colspan="7"> {{ this.model.sbName }} </td>
            <td colspan="1">车间具体位置</td>
            <td colspan="9">{{ this.model.sbLocation }} </td>
          </tr>
          <tr >
            <td colspan="1" rowspan="11" style="width: 10px;">委<br/>托<br/>单<br/>位<br/>填<br/>写</td>
            <td colspan="14" >
              <div>
                1、委托内容描述：<br/>
                <a-textarea v-model="value5" disabled='disabled' style="resize:none;border:none;" :rows="4"/>
              </div>
            </td>
            <td colspan="1" rowspan="11" style="width: 10px;">检<br/>维<br/>修<br/>单<br/>位<br/>填<br/>写</td>
            <td colspan="14" >
              <div>
                1、维修工作描述：<br/>
                <a-textarea v-model="value6" style="resize:none;border:none;" :rows="4"/>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="14">2、需检维修单元状态</td>
            <td colspan="14" rowspan="2">
              <div>
                2、检维修结果描述：<br/>
                <a-textarea v-model="value7" style="resize:none;border:none;" :rows="4"/>
              </div>
            </td>
          </tr>

          <tr>
            <td colspan="14" >
              <a-checkbox-group v-model="value8" style="width:100%" @change="onChange">
                <a-checkbox :value="1" disabled>
                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(1)" type="check" />需检维修单元已经排放冲洗干净</span>
                </a-checkbox >
                <br/>
                <a-checkbox :value="2" disabled>
                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(2)" type="check" />需检维修单元已经隔离
                  </span>
                </a-checkbox >
                <br/>
                <a-checkbox :value="3" disabled>
                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(3)" type="check" />需检维修单元设备已经停电</span>
                </a-checkbox>
                <br/>
                <a-checkbox :value="4" disabled>
                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(4)" type="check" />其他</span>
                </a-checkbox >
              </a-checkbox-group>
            </td>
          </tr>
          <tr>
            <td colspan="3">委修人</td>
            <td colspan="4"> {{ this.model.caller }}</td>
            <td colspan="3">确认可施工</td>
            <td colspan="4"> </td>
            <td colspan="3">派工工程师</td>
            <td colspan="11"> {{ this.model.dispatcher }}</td>
          </tr>
          <tr>
            <td colspan="3">委修主管</td>
            <td colspan="4" style="width:70px"> </td>
            <td colspan="3">完工时间</td>
            <td colspan="4"> </td>
            <td colspan="3">检维修人</td>
            <td colspan="11">{{ this.model.repairMan }} </td>
          </tr>
          <tr>
            <td colspan="3">特殊作业监护人</td>
            <td colspan="11"> </td>
            <td colspan="4"> </td>
            <td colspan="3"> </td>
            <td colspan="11"> </td>
          </tr>
          <tr>
            <td colspan="3">特殊作业核准</td>
            <td colspan="11"> </td>
            <td colspan="4"> </td>
            <td colspan="3"> </td>
            <td colspan="11"> </td>
          </tr>
          <tr>
            <td colspan="3">验收合格</td>
            <td colspan="11"> </td>
            <td colspan="3">工时统计</td>
            <td colspan="4"> </td>
            <td colspan="3">主管签字</td>
            <td colspan="4" style="width:70px"></td>
          </tr>
        </table>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      disabled: false,
      value1: 1,
      value2: null,
      value3: null,
      value4: null,
      value5: null,
      value6: null,
      value7: null,
      value8: [],
      model: {
        'repairNo': null,
        'callTime': null,
        'sbNo': null,
        'sbName': null,
        'sbLocation': null,
        'caller': null,
        'dispatcher': null,
        'repairMan': null,
        'content': null,
        'sbPositionName': null,
        'requireHours': null,
        'repairProfessor': null,
        'repairType': null
      }
    }
  },
  methods: {
    onChange (checkedValues) {
      console.log(this.value8, this.value8.includes(1))
    },
    base (record) {
      this.visible = true
      this.model = record
      this.value2 = this.model.repairProfessor
      this.value4 = this.model.repairType
      this.value5 = this.model.content
    },
    handleCancel (values) {
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style lang="less" scoped>
.main{
  background: #fff;
}
.title{
  text-align: center;
  font-size:18px;
}
.tables{
  margin: 10px auto;
   width: 1030px;
  height: 600px;
  font-size: 14px;
  overflow-x:auto;
  table {
        min-width:100%;
        margin: 0 auto;
        border: 1px solid #D6D6D6;
        border-radius: 6px;
        border-collapse: collapse;
        font-weight: 400;
        table-layout:fixed;
    }
    th{
      color: #FFFFFF;
      background: #3762FC;
    }
    tr {
      height:26px;
    }
    th,
    td {
        border: 1px solid #D6D6D6;
        // text-align: center;
        padding: 2px 10px;
        white-space: nowrap;
    }
}
.check{
  position:absolute;
  left:0px;
  font-size:20px;
}
.checks{
  position:absolute;
  left:-27px;
  font-size:20px;
}
/deep/.ant-radio-inner::after ,/deep/.ant-checkbox-checked .ant-checkbox-inner{
  background-color:#fff
}
</style>