9-24 加班

XiaoRuby

2023-09-24 abba64c23543cd806ed8864a9a976408618a5f45

 src/components/view/Processingproducts.vue

@@ -1,192 +1,285 @@
<template>
    <div>
        <div class="article-main" style="overflow: hidden;">
            <el-row>
    <div class="unqualifiedBox">
        <el-row>
            <el-col :span="12" style="line-height: 32px;">不合格品处置</el-col>
            <el-col :span="12" style="text-align: right;">
                <el-button icon="el-icon-download" size="mini" @click="()=>{}">导出</el-button>
                <el-button icon="el-icon-download" size="mini" @click="() => { }">导出</el-button>
            </el-col>
            </el-row>
            <div>
                
                <div style="margin-top: 10px;">
                    <el-card shadow="hover" class="margin-30"> 
                            <el-form ref="form" :model="searchform" label-width="80px">
                            <el-row :gutter="25">
                                <el-col :span="7" >
                                    <el-form-item label="产品名称:">
                                        <el-input v-model="searchform.name" placeholder="请输入"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7" >
                                    <el-form-item label="规格型号:">
                                        <el-input v-model="searchform.stude" placeholder="请输入"></el-input>                      
                                    </el-form-item> 
                                </el-col> 
                                <el-col :span="5">
                                    <el-button size="default"  @click="">重置</el-button>
                                    <el-button type="primary" size="default" style="background:0, 78, 162 ;" @click="getDetailInfo">查询</el-button>

                                </el-col>        
                            </el-row>                                                 
                            </el-form>
                    </el-card> 
        </el-row>
        <div style="margin-top: 1em;">
            <el-card shadow="hover" style="height: 6em; display: flex;align-items: center;">
                <div class="choose">
                    <span>产品名称：</span>
                    <el-input size="small" v-model="search.productName" style="width: 13vw;margin-right: 5px;" placeholder="请输入" clearable></el-input>
                    <span>规格型号：</span>
                    <el-input size="small" v-model="search.specificationModel" style="width: 13vw;margin-right: 5px;" placeholder="请输入" clearable></el-input>
                    <span>产品大类：</span>
                    <el-select v-model="search.productCategories" size="small" placeholder="请选择" style="width: 13vw;margin-right: 5px;">
                        <el-option label="原材料" :value="0"></el-option>
                        <el-option label="半成品" :value="1"></el-option>
                        <el-option label="在制品" :value="2"></el-option>
                    </el-select>
                    <span>状态：</span>
                    <el-select v-model="search.state" size="small" placeholder="请选择" style="width: 13vw;margin-right: 5px;">
                        <el-option label="返修中" :value="1"></el-option>
                        <el-option label="待处理" :value="0"></el-option>
                    </el-select>
                    <el-button size="mini" @click="clean()"><span>重 置</span></el-button>
                    <el-button size="mini" type="primary" style="background: #004EA2;" @click="unqualifiedTable = [];getDetailInfo();"><span>查 询</span></el-button>
                </div>
                
                <div style="margin-top: 30px;">
                    <el-card shadow="hover" class="margin-30"> 
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                            type="selection"
                            width="55">
                            </el-table-column>
                            <el-table-column
                            label="日期"
                            width="120">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-col style="height: 50px;display: flex;align-items: center;justify-content: right;">
                        <el-pagination
                        @size-change="handleSizeChange" 
                        @current-change="handleCurrentChange"
                        :current-page="4"
                        :page-sizes="[1,10, 20, 30, 50]" 
                        :page-size="4" 
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="countSize">
                        </el-pagination>
                    </el-col>
                </div>           
            </div>       
            </el-card>
        </div>
    </div>  
        <div class="tableno" style="height:300px">
            <el-card shadow="hover">
                <el-table :data="unqualifiedTable" border tooltip-effect="dark" height="calc(100vh - 340px)" style="width: 100%" :header-cell-style="{height: '50px'}">
                    <el-table-column type="index" label="序号" width="60">
                        <template slot-scope="scope">
                            {{ (search.pageSize - 1) * search.countSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="dateArrival" label="产品大类" min-width="100">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 0">原材料</span>
                            <span v-if="scope.row.type == 1">半成品</span>
                            <span v-if="scope.row.type == 2">在制品</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productName" label="产品名称" min-width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格型号" min-width="100">
                    </el-table-column>
                    <el-table-column prop="number" label="不合格品数量" min-width="150">
                    </el-table-column>
                    <el-table-column label="现像描述" min-width="150">
                        <template slot-scope="scope">
                            <el-input size="small" v-model="scope.row.description" @blur="outOfFocusDescription(scope)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="处置意见" min-width="100">
                        1232
                    </el-table-column>
                    <el-table-column prop="user_name" label="申请人" min-width="80"> </el-table-column>
                    <el-table-column prop="date" label="日期" min-width="150"> </el-table-column>
                    <el-table-column prop="deal_state" label="状态">
                        <template slot-scope="scope">
                            <span style="color:#34BD66;" v-if="scope.row.deal_state == 1">已处理</span>
                            <span style="color:#E84738;" v-else-if="scope.row.deal_state == 0">待处理</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="130" fixed="right">
                        <template slot-scope="scope">
                            <div style="display: flex;">
                                <el-button type="text" siae="small" size="mini">附件</el-button>
                                <el-button type="text" siae="small" size="mini" style=" color:87, 138, 193 ;" @click="clickEditorialOpinion(scope)">编辑意见</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-col style="height: 50px;display: flex;align-items: center;justify-content: right;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="search.pageSize" :page-sizes="[10, 15, 20, 30, 50]" :page-size="search.countSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </el-col>
            </el-card>
        </div>
        <el-dialog title="最终处置意见" :visible.sync="dialogVisible" width="30%">
            <el-form label-width="120px">
                <div>
                    <el-form-item label="最终处置意见：">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="clickEditOpinion.opinion_tell" />
                    </el-form-item>
                    <el-form-item label="处置方式：">
                        <el-radio-group v-model="clickEditOpinion.way">
                            <el-radio :label="3">接收</el-radio>
                            <el-radio v-if="clickEditOpinion.type == 0" :label="2">让步接收</el-radio>
                            <el-radio v-if="clickEditOpinion.type !== 0" :label="4">降级使用</el-radio>
                            <el-radio v-if="clickEditOpinion.type == 0" :label="7">换货</el-radio>
                            <el-radio v-if="clickEditOpinion.type == 0" :label="6">退货</el-radio>
                            <el-radio :label="1">返工返修</el-radio>
                            <el-radio v-if="clickEditOpinion.type !== 0" :label="5">报废</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateEditDevided()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>



<script>
import { watch } from "vue";
export default {
    data() {
      return {       
        searchform:{ 
            name:'',
            stude:''
        },
        tableData: [
            {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
    ],
        pageSize:3,
        countSize:1,
        currentPage:2,
        multipleSelection:''
      }
        return {
            isShow: false,
            search: {
                countSize: 10, // 条数/页
                pageSize: 1, // 起始页
                productCategories: "", // 产品大类
                productName: "", // 产品名称
                specificationModel: "", // 规格型号
                state: "", // 状态
            },
            unqualifiedTable: [], // 页面表格数据
            total: 0, // 总条数
            dialogVisible: false, // 显示弹出框
            clickEditOpinion: "", // 点击编辑意见临时存储该行数据
        };
    },
    created(){
        // this.getDetailInfo()
    mounted() {
        this.getDetailInfo();
    },
    methods:{
        handleSelectionChange(val) {
            // console.log(val);
        // this.multipleSelection = val;
      },
    methods: {
        // 分页
        handleSizeChange(val) {
            console.log(val);
        // this.pageSize = 1
        // this.countSize= val
        // this.getDetailInfo()
            this.search.countSize = val;
            this.getDetailInfo();
        },
        // 分页
        handleCurrentChange(val) {
        // this.pageSize = val
        // this.getDetailInfo()
            this.search.pageSize = val;
            this.getDetailInfo();
        },
        // 分页表格数据
        getDetailInfo() {
            let aa = [0,5]
            aa.map(el =>{
                console.log(el);
            })            
            console.log(this.searchform.name);
            console.log(this.searchform.stude);
            // this.tableData
            // this.axios.get(this.$api.url.gettable,{
            //     params:{pageNo:10,
            //         pageSize:1,
            //         productName:this.searchform.name,
            //         specificationsModels:this.searchform.stude
            //     },
            // }).then(res=>{
            //     console.log(res);
            //     this.tableData = res.data.row
            // })
        }
}}
    //   methods:{
    //     toggleSelection(rows) {
    //     if (rows) {
    //       rows.forEach(row => {
    //         this.$refs.multipleTable.toggleRowSelection(row);
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   },
    
    //  }
    // }
  

            this.axios
                .get(this.$api.url.getTable, {
                    params: this.search,
                })
                .then((res) => {
                    this.unqualifiedTable = res.data.row;
                    this.total = res.data.total;
                });
        },
        // 重置按钮
        clean() {
            this.search = {
                countSize: 10, // 条数/页
                pageSize: 1, // 起始页
                productCategories: "", // 产品大类
                productName: "", // 产品名称
                specificationModel: "", // 规格型号
                state: "", // 状态
            };
            this.getDetailInfo();
        },
        // 点击编辑意见
        clickEditorialOpinion(scope) {
            this.dialogVisible = true;
            this.clickEditOpinion = scope.row;
        },
        // 失去现像描述焦点触发
        outOfFocusDescription(scope) {
            this.axios
                .get(this.$api.url.descriptionUpdate, {
                    params: {
                        rawUnacceptedId: scope.row.id,
                        tell: scope.row.description,
                    },
                })
                .then((res) => {
                    this.$message({
                        message: res.message,
                        type: "success",
                    });
                });
        },
        // 点击确定按钮
        updateEditDevided() {
            console.log(`output->this.clickEditOpinion`, this.clickEditOpinion);
            this.axios
                .post(this.$api.url.editDisposalOpinion, {
                    opinionTell: this.clickEditOpinion.opinion_tell,
                    rawUnacceptedId: this.clickEditOpinion.id,
                    way: this.clickEditOpinion.way,
                    type: this.clickEditOpinion.type,
                })
                .then((res) => {
                    this.dialogVisible = false;
                    this.$message({
                        message: res.message,
                        type: "success",
                    });
                });
        },
    },
    watch: {
        dialogVisible: {
            handler(newVal, oldVal) {
                if (newVal == false) {
                    this.isShow = false;
                }
            },
        },
    },
};
</script>

<style scoped>
.card-2{
    display: flex;
    margin-top: 30px;
.main_div {
    padding-top: 15px;
}

.ssss{
.el-radio__label {
    font-size: 16px;
}

.el-radio {
    margin-right: 60px;
    margin-top: 10px;
}

.el-form-item {
    margin-bottom: 6px;
    font-size: 16px;
}

.unqualifiedBox {
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.unqualifiedBox .title .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
}

/deep/ .el-table__cell {
    padding: 5px 0;
}

.unqualifiedBox .title {
    margin-bottom: 10px;
    padding: 0 20px;
}

/* 条件查询头部样式 */
.choose {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 3px solid rgb(245, 247, 251);
    font-size: 14px;
}

.choose .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
}
.choose span {
    /* span内容强制不换行 */
    white-space: nowrap;
}

.tableno {
    margin-top: 10px;
}
</style>