|
|
@@ -0,0 +1,200 @@
|
|
|
+<!-- @desc:作业指导书 @auth:洪旭东 @time:2023-09-06 -->
|
|
|
+<template>
|
|
|
+ <div class="main">
|
|
|
+ <div class="header">
|
|
|
+ <img src="../../../assets/images/hj_logo.png" class="header-img"/>
|
|
|
+ <h1>恒洁卫浴生产工艺作业指导书</h1>
|
|
|
+ <Button shape="circle" icon="md-qr-scanner" type="text" class="header-full-screen"
|
|
|
+ @click="enterFullScreen"></Button>
|
|
|
+ </div>
|
|
|
+ <div class="condition">
|
|
|
+ <div class="input">
|
|
|
+ <Input v-model="barCode" placeholder="请输入产品编码" @on-blur="getData" @on-enter="getData"/>
|
|
|
+ <Input v-model="sopTitle" placeholder="请输入指导书标题" class="right-input" @on-blur="getData" @on-enter="getData"/>
|
|
|
+ </div>
|
|
|
+ <RadioGroup v-model="nodeKindFlag" type="button" @on-change="getData">
|
|
|
+ <Radio label="null">全部</Radio>
|
|
|
+ <Radio label="true">检验工序</Radio>
|
|
|
+ <Radio label="false">功能工序</Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </div>
|
|
|
+ <Row class="content">
|
|
|
+ <Col span="6" v-for="(item, index) of list" :key="index" class="card">
|
|
|
+ <div class="card-border" @click="openPdf(item.sopPath)">
|
|
|
+ <div class="sop-img"
|
|
|
+ :style="' background-image: url(' + $config.imgUrl + item.sopImg + ')'"/>
|
|
|
+ <div
|
|
|
+ class="title-bar">
|
|
|
+ <div class="title">
|
|
|
+ {{ item.sopTitle }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { request } from '@/api/base'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'work-sop',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nodeKindFlag: 'null',
|
|
|
+ list: [],
|
|
|
+ barCode: null,
|
|
|
+ sopTitle: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ request(this.$service.workSopService.prefix + this.$service.workSopService.getForTouch, {
|
|
|
+ ftyId: this.$store.state.user.ftyId,
|
|
|
+ barCode: this.barCode,
|
|
|
+ sopTitle: this.sopTitle,
|
|
|
+ nodeKindFlag: this.nodeKindFlag
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code === this.$config.SUCCESS_CODE) {
|
|
|
+ this.list = res.data
|
|
|
+ } else {
|
|
|
+ this.$Message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @desc : 打开pdf
|
|
|
+ * @author : 洪旭东
|
|
|
+ * @date : 2023-09-07 09:19
|
|
|
+ */
|
|
|
+ openPdf(path) {
|
|
|
+ window.open(this.$config.imgUrl + path)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * @desc : 全屏
|
|
|
+ * @author : 洪旭东
|
|
|
+ * @date : 2023-09-07 15:05
|
|
|
+ */
|
|
|
+ enterFullScreen() {
|
|
|
+ if (this.maxFlag) {
|
|
|
+ this.maxFlag = false
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen()
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen()
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen()
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.maxFlag = true
|
|
|
+ document.documentElement.webkitRequestFullScreen()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.main {
|
|
|
+ padding: 30px 15px;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .header-img {
|
|
|
+ height: 18px;
|
|
|
+ width: 140px;
|
|
|
+ position: absolute;
|
|
|
+ left: 30px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-full-screen {
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ z-index: 2;
|
|
|
+ font-size: 20px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ height: 2.5%;
|
|
|
+ width: 35%;
|
|
|
+ position: absolute;
|
|
|
+ left: 30px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .right-input {
|
|
|
+ margin-left: 20px
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-top: 15px;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: calc(~'100% - 50px');
|
|
|
+
|
|
|
+ .card {
|
|
|
+ text-align: center;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .sop-img {
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border: 1px solid lightgrey;
|
|
|
+ height: 350px;
|
|
|
+ width: 100%;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-bar {
|
|
|
+ border: 1px solid lightgrey;
|
|
|
+ height: 75px;
|
|
|
+ width: 100%;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin: 15px;
|
|
|
+ border: 2px solid grey;
|
|
|
+ border-radius: 6px;
|
|
|
+ color: grey;
|
|
|
+ height: 43px;
|
|
|
+ line-height: 43px;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-border {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-border:hover {
|
|
|
+ box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
|
|
|
+ border-color: #eee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
hongxudong