完善

src/views/repair/application-form/modules/TicketForm.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="main">
+    <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" />生产部
+                </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-group>
+            </td>
+          </tr>
+          <tr>
+            <td colspan="3">委修单编号</td>
+            <td colspan="12"></td>
+            <td colspan="3">委托时间</td>
+            <td colspan="12"> 2022 年 8 月 23 日</td>
+          </tr>
+          <tr>
+            <td colspan="3">工作优选权</td>
+            <td colspan="27">
+              <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" />普通作业
+                </a-radio>
+                <a-radio :value="2">
+                  <a-icon class="check" v-show="value4 ==2" type="check" />动火作业
+                </a-radio>
+                <a-radio :value="3">
+                  <a-icon class="check" v-show="value4 ==3" type="check" />受限空间作业
+                </a-radio>
+                <a-radio :value="4">
+                  <a-icon class="check" v-show="value4 ==4" type="check" />登高作业
+                </a-radio>
+                <a-radio :value="5">
+                  <a-icon class="check" v-show="value4 ==5" type="check" />其它特殊作业
+                </a-radio>
+              </a-radio-group></td>
+          </tr>
+          <tr>
+            <td colspan="3">设备位号</td>
+            <td colspan="9"></td>
+            <td colspan="3">设备名称</td>
+            <td colspan="7"> </td>
+            <td colspan="1">设备位置</td>
+            <td colspan="9"> </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" 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">
+                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(1)" type="check" />需检维修单元已经排放冲洗干净</span>
+                </a-checkbox >
+                <br/>
+                <a-checkbox :value="2">
+                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(2)" type="check" />需检维修单元已经隔离
+                  </span>
+                </a-checkbox >
+                <br/>
+                <a-checkbox :value="3">
+                  <span style="position:relative"><a-icon class="checks" v-show="value8.includes(3)" type="check" />需检维修单元设备已经停电</span>
+                </a-checkbox>
+                <br/>
+                <a-checkbox :value="4">
+                  <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"> </td>
+            <td colspan="3">确认可施工</td>
+            <td colspan="4"> </td>
+            <td colspan="3">派工主管</td>
+            <td colspan="11"> </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"> </td>
+          </tr>
+          <tr>
+            <td colspan="3"> </td>
+            <td colspan="4"> </td>
+            <td colspan="3"> </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="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: null,
+      value2: null,
+      value3: null,
+      value4: null,
+      value5: null,
+      value6: null,
+      value7: null,
+      value8: []
+
+    }
+  },
+  methods: {
+    onChange (checkedValues) {
+      console.log(this.value8, this.value8.includes(1))
+    },
+    handleCancel (values) {
+      this.visible = false
+    }
+  }
+}
+</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>