From 724cf63424264908112b51f68f62f38923582b21 Mon Sep 17 00:00:00 2001
From: "JinLu.Yin" <411641505@qq.com>
Date: Wed, 27 Jul 2022 20:52:03 +0800
Subject: [PATCH] SOP

---
 src/api/mes/md/sop.js                      |  44 ++++
 src/components/FileUpload/index.vue        |   2 +-
 src/components/ImageUpload/index.vue       |   6 +-
 src/views/mes/md/mditem/components/sop.vue | 234 +++++++++++++++++++++
 src/views/mes/md/mditem/index.vue          |   7 +-
 5 files changed, 287 insertions(+), 6 deletions(-)
 create mode 100644 src/api/mes/md/sop.js
 create mode 100644 src/views/mes/md/mditem/components/sop.vue

diff --git a/src/api/mes/md/sop.js b/src/api/mes/md/sop.js
new file mode 100644
index 0000000..605e5c1
--- /dev/null
+++ b/src/api/mes/md/sop.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询产品SOP列表
+export function listSop(query) {
+  return request({
+    url: '/mes/md/sop/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询产品SOP详细
+export function getSop(sopId) {
+  return request({
+    url: '/mes/md/sop/' + sopId,
+    method: 'get'
+  })
+}
+
+// 新增产品SOP
+export function addSop(data) {
+  return request({
+    url: '/mes/md/sop',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改产品SOP
+export function updateSop(data) {
+  return request({
+    url: '/mes/md/sop',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除产品SOP
+export function delSop(sopId) {
+  return request({
+    url: '/mes/md/sop/' + sopId,
+    method: 'delete'
+  })
+}
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index aa2296b..5567b44 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -73,7 +73,7 @@ export default {
       number: 0,
       uploadList: [],
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/uploadMinio", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index 4068b67..63a5696 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -77,7 +77,7 @@ export default {
       dialogVisible: false,
       hideUpload: false,
       baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadMinio", // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
@@ -122,7 +122,7 @@ export default {
       const findex = this.fileList.map(f => f.name).indexOf(file.name);
       if(findex > -1) {
         this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
+        this.$emit("onRemoved", this.listToString(this.fileList));
       }
     },
     // 上传成功回调
@@ -132,7 +132,7 @@ export default {
         this.fileList = this.fileList.concat(this.uploadList);
         this.uploadList = [];
         this.number = 0;
-        this.$emit("input", this.listToString(this.fileList));
+        this.$emit("onUploaded", this.listToString(this.fileList));
         this.$modal.closeLoading();
       }
     },
diff --git a/src/views/mes/md/mditem/components/sop.vue b/src/views/mes/md/mditem/components/sop.vue
new file mode 100644
index 0000000..0591db2
--- /dev/null
+++ b/src/views/mes/md/mditem/components/sop.vue
@@ -0,0 +1,234 @@
+<template>
+    <div class="app-container">
+        <el-row v-if="optType != 'view'" :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['mes:md:sop:add']"
+                >新增</el-button>
+            </el-col>
+        </el-row>
+        <div class="header">
+            <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
+                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                    <el-form-item label="标题" prop="sopTitle">
+                        <el-input v-model="form.sopTitle" placeholder="请输入标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="展示顺序">
+                        <el-input-number :min="1" v-model="form.orderNum"></el-input-number>
+                    </el-form-item>
+                    <el-form-item label="内容说明">
+                        <el-input type="textarea" v-model="form.sopDescription" placeholder="请输入说明信息"></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属工序" prop="processId">
+                        <el-select v-model="form.processId" placeholder="请选择工序">
+                            <el-option
+                            v-for="item in processOptions"
+                            :key="item.processId"
+                            :label="item.processName"
+                            :value="item.processId"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="图片">
+                        <ImageUpload :limit="1" :value="form.sopUrl" :fileSize="5" @onUploaded="handleImgUplaoded" @onRemoved="handleImgRemoved" ></ImageUpload>
+                    </el-form-item>                    
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="submitForm">提 交</el-button>
+                    <el-button @click="cancel">取 消</el-button>
+                </div>
+            </el-dialog>
+        </div>
+        <div class="images">
+            <div v-for="(item,index) in sopList" :key="index" class="image-middle">
+                <el-card shadow="hover" :body-style="{pading: '10px'}">
+                    <el-popover>
+                        <img :src="sopList[index].url" slot="reference" class="image"/>
+                        <el-image class="imagePreview" :src="sopList[index].url" :preview-src-list="imageList"></el-image>                        
+                    </el-popover>
+                    <div style="text-align:center;padding-top:12px">
+                        <span>
+                            {{sopList[index].sopDescription}}
+                        </span>
+                        <el-button @click="handleUpdate(sopList[index])" type="primary" icon="el-icon-edit"></el-button>
+                        <el-button @click="handleDelete(sopList[index])" type="danger" icon="el-icon-delete"></el-button>
+                    </div>
+                </el-card>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { listSop, getSop, delSop, addSop, updateSop } from "@/api/mes/md/sop";
+import ImageUpload from "@/components/ImageUpload/index.vue"
+import {listAllProcess} from "@/api/mes/pro/process";
+export default{
+    name: "SOPTab",
+    components: {ImageUpload},
+    props:{
+        itemId: null,
+        optType: null,
+    },
+    data(){
+        return {
+            title: "新增SOP信息",
+            loading: true,
+            open: false,      
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                itemId: [
+                    { required: true, message: "物料产品ID不能为空", trigger: "blur" }
+                ],
+            },     
+            // 产品SOP表格数据
+            sopList: [
+                {
+                    sopId: 1,
+                    sopTitle: '移液盒注塑作业指导书-1',
+                    sopDescription: "请注意操作顺序",
+                    sopUrl: "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
+                }
+            ], 
+            //用于图片预览的清单
+            imageList: [],
+            //工序选项
+            processOptions:[],
+            
+        }
+    },
+    created(){
+        this.getProcess();
+    },
+    methods: {
+        //获取当前产品的SOP资料清单
+        getSopList(){
+
+        },
+         //查询工序信息
+        getProcess(){
+            listAllProcess().then( response =>{
+                this.processOptions = response.data;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                sopId: null,
+                itemId: this.itemId,
+                orderNum: null,
+                processId: null,
+                processCode: null,
+                processName: null,
+                sopTitle: null,
+                sopDescription: null,
+                sopUrl: null               
+            };
+            this.resetForm("form");
+        },
+        /**
+         * 新增操作
+         */
+        handleAdd(){
+            this.reset();
+            this.open = true;
+            this.title = "添加产品SOP";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            const sopId = row.sopId || this.ids
+            getSop(sopId).then(response => {
+                this.form = response.data;
+                this.open = true;
+                this.title = "修改产品SOP";
+            });
+        },
+        //选择工序
+        handleSelectProcess(){
+
+        },
+        //图片上传成功
+        handleImgUplaoded(imgUrl){
+            console.log(imgUrl);
+            this.form.sopUrl = imgUrl;
+        },
+        //图片移除
+        handleImgRemoved(imgUrl){
+            console.log(imgUrl);
+            this.form.sopUrl = null;            
+        },
+        //提交
+        submitForm(){
+            this.$refs["form"].validate(valid => {
+                    if (valid) {
+                    if (this.form.sopId != null) {
+                        updateSop(this.form).then(response => {
+                        this.$modal.msgSuccess("修改成功");
+                        this.open = false;
+                        this.getList();
+                        });
+                    } else {
+                        addSop(this.form).then(response => {
+                        this.$modal.msgSuccess("新增成功");
+                        this.open = false;
+                        this.getList();
+                        });
+                    }
+                    }
+                });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const sopIds = row.sopId || this.ids;
+            this.$modal.confirm('是否确认删除产品SOP编号为"' + sopIds + '"的数据项？').then(function() {
+                return delSop(sopIds);
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        },
+    }
+}
+</script>
+<style scoped>
+    .header {
+        margin-left: 15px;
+        font-size: 30px;
+        font-weight: 600;
+    }
+
+    .images {
+        display: flex;
+        margin-top: 20px;
+        margin-left: 21px;
+        margin-right: 20px;
+        flex-wrap: wrap;
+    }
+
+    .image-middle{
+        margin-right: 15px;
+        margin-bottom: 15px;
+    }
+
+    .image{
+        width:110px;
+        height: 110px;
+    }
+
+    .imagePreview {
+        width: 600px;
+        height: 500px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/mes/md/mditem/index.vue b/src/views/mes/md/mditem/index.vue
index 5763ae9..94f071c 100644
--- a/src/views/mes/md/mditem/index.vue
+++ b/src/views/mes/md/mditem/index.vue
@@ -315,7 +315,9 @@
         <el-tab-pane label="供应商"></el-tab-pane>
         <el-tab-pane label="替代品"></el-tab-pane>
         <el-tab-pane label="SIP"></el-tab-pane>
-        <el-tab-pane label="SOP"></el-tab-pane>
+        <el-tab-pane label="SOP">
+          <SOPTab></SOPTab>
+        </el-tab-pane>
       </el-tabs>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
@@ -360,6 +362,7 @@
 import { listMdItem, getMdItem, delMdItem, addMdItem, updateMdItem} from "@/api/mes/md/mdItem";
 
 import ItemBom from "./components/itembom.vue";
+import SOPTab from  "./components/sop.vue"
 import { listAllUnitmeasure} from "@/api/mes/md/unitmeasure";
 import {genCode} from "@/api/system/autocode/rule"
 import { getToken } from "@/utils/auth";
@@ -370,7 +373,7 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "MdItem",
   dicts: ['sys_yes_no','mes_item_product'],
-  components: { Treeselect,ItemBom },
+  components: { Treeselect,ItemBom,SOPTab },
   data() {
     return {
       // 遮罩层