1

src/components/assetsman/outboundDetails.vue

+<template>
+  <div class="outboundDetails">
+    <div class="routerTitle">
+      <span class="pageTitle">出库详情 <span @click="Backto" style="position:relative;top:-5px" class="backTo">返回</span></span>
+      <span
+        style="display:inline-flex;align-items:center;cursor: pointer;"
+        class="f12 cd6"
+      >
+        <span style="margin-right:5px"></span>
+        
+      </span>
+    </div>
+    <div class="padContent">
+        <div class="xiangq">
+            <div>
+                 <span class="topkuang">申请状态: 
+                <span v-if="tableData.ApplyStatus==1">待审核</span> 
+                <span v-if="tableData.ApplyStatus==2">已审核</span> 
+                <span v-if="tableData.ApplyStatus==3">拒绝</span> 
+            </span>
+            <span class="topkuang">出库状态:
+                <span v-if="tableData.OutStatus==0">未出库</span> 
+                <span v-if="tableData.OutStatus==1">部分出库</span> 
+                <span v-if="tableData.OutStatus==2">全部出库</span> 
+            </span>
+            <span class="topkuang">审核理由:{{tableData.ExamineReason}}</span>
+            </div>
+            <div>
+                 <el-button v-if="tableData.ApplyStatus==1" class='butoons' type="primary" round @click="See(2)">审核</el-button>
+                <el-button  v-if="tableData.ApplyStatus==1" class='butoons' type="danger" round @click="See(3)">拒绝</el-button>
+               
+            </div>
+            
+        </div>
+
+        <!-- #e2e2e2 -->
+        <div>
+            <vxe-table stripe style="margin-top:15px" :loading="loading"
+            :data="tableData.WarehouseOutGoodsList">
+            <vxe-table-column field="OrderNo" title="订单号" width='300'></vxe-table-column>
+            <vxe-table-column field="GoodsName" title="商品名称"></vxe-table-column>
+            <vxe-table-column field="Specification" title="规则"  width='300'></vxe-table-column>
+            <vxe-table-column field="Number" title="数量"  width='100'></vxe-table-column>
+            <vxe-table-column field="Name" title="出库状态" width='180'>
+              <template  v-slot="{ row }">
+                <span class="commonStyle hoverSpan1"></span>
+                  <span  v-if="row.IsOut==0">未出库</span>
+                    <span  v-if="row.IsOut==1">已出库</span>              
+              </template>
+            </vxe-table-column>
+        
+        </vxe-table>
+      
+        
+        </div>
+        
+    </div>
+    
+    <el-dialog
+            :title="isagree==2?'同意申请':'拒绝申请'"
+            :close-on-click-modal="false"
+            top="0"
+            :visible.sync="dialogState"
+            width="400px">
+            <el-form class="MyEditForm" label-width="0">
+                <el-form-item prop="Name" style="margin-left:60px;">
+                    <span class="label">理由</span>
+                    <el-input v-model="Updatemsg.ExamineReason" type="textarea"  placeholder="请输入"></el-input>
+                </el-form-item>
+                <div class="btnformItem">
+                    <span class="submitBtn" type="primary" @click="submitForm()">确定</span>
+                    <span class="exitBtn" @click="dialogState=false">取消</span>
+                </div>
+            </el-form>
+        </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "outboundDetails",
+  data() {
+    return {
+      
+        loading:false,
+      tableData:[],
+      morequery: false,
+      Updatemsg:{
+           ID:0,
+           ExamineReason:'',
+           ApplyStatus:0
+      },
+      total:0,
+      isagree:1, //同意为2 拒绝为3
+     dialogState:false,
+    };
+  },
+  mounted() {
+    this.getList();
+   
+  },
+  methods: {
+     Backto(){
+        this.$router.push({
+            path: "/outboundApplication"
+        });
+    },
+    getList() {
+      
+      this.loading = true;
+      this.apiJavaPost(
+        "/api/WarehouseOut/GetWarehouseOutApply",
+        {ID:this.$route.query.ID},
+        res => {
+          this.loading = false;
+          if (res.data.resultCode === 1) {
+            this.tableData = res.data.data;
+            
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+      
+    },
+       currentChange(val) {
+        this.msg.pageIndex = val;
+        this.getList();
+    },
+    See(type){
+         this.Updatemsg.ID = this.$route.query.ID;
+         this.Updatemsg.ApplyStatus  = type;
+         this.Updatemsg.ExamineReason = '';
+        this.isagree =type;
+        this.dialogState=true
+    },
+    submitForm(){
+        if(this.isagree==3 && this.Updatemsg.ExamineReason.length == 0){
+            this.Error('请填写理由');
+            return
+        }
+        console.log(this.Updatemsg)
+         this.apiJavaPost(
+        "/api/WarehouseOut/UpdateWarehouseOutApply",
+        this.Updatemsg,
+        res => {
+         
+          if (res.data.resultCode === 1) {
+            this.dialogState=false;
+            this.Backto()
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+
+    }
+    
+  }
+};
+</script>
+
+<style>
+.outboundDetails .MyEditForm .baseform .el-form-item:nth-child(4n) {
+  margin-right: 0;
+}
+.outboundDetails .zczt1 {
+  background: #ffe4d5;
+  color: #ffa87c;
+}
+.outboundDetails .zczt2 {
+  background: #beeff0;
+  color: #089bab;
+}
+.outboundDetails .zczt3 {
+  background: #ffd6d5;
+  color: #ff7874;
+}
+.outboundDetails .zczt4 {
+  background: #d7d6ff;
+  color: #7b78ff;
+}
+.outboundDetails .Commonzczt {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 50%;
+  font-size: 12px;
+  font-family: "Microsoft YaHei";
+}
+.outboundDetails {
+  width: 100%;
+  height: 100%;
+}
+.outboundDetails .topkuang{
+    padding: 5px 10px;
+    border:1px solid #e2e2e2;
+    background: #e2e2e2;
+    border-radius: 15px;
+    margin-right: 25px;
+}
+.outboundDetails .xiangq{
+    padding: 15px 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.outboundDetails .butoons{
+    /* float: right; */
+    margin-right: 10px;
+}
+</style>