Crunchy-09/08

XiaoRuby

2023-09-08 b500cdcc0e39d392c67d0273800da4c4fffb7b3e

 src/components/view/Processingproducts.vue

@@ -1,192 +1,400 @@
<template>
    <div>
        <div class="article-main" style="overflow: hidden;">
  <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 shadow="hover" class="margin-30" style="height: 80px;">
        <div class="choose">
          <span>产品名称：</span>
          <el-input
            size="small"
            v-model="search.productName"
            style="width: 224px;margin-right: 30px;"
            placeholder="请输入"
            clearable
          ></el-input>
          <span>规格型号：</span>
          <el-input
            size="small"
            v-model="search.specificationModel"
            style="width: 224px;margin-right: 30px;"
            placeholder="请输入"
            clearable
          ></el-input>
          <span>产品大类：</span>
          <el-select
            v-model="search.productCategories"
            size="small"
            placeholder="请选择"
            style="width: 224px;margin-right: 30px;"
          >
            <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: 224px;margin-right: 30px;"
          >
            <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>
                    </el-card> 
                </div>
                
                <div style="margin-top: 30px;">
    <div class="tableno" style="height:300px">
                    <el-card shadow="hover" class="margin-30"> 
                        <el-table
          :data="unqualifiedTable"
          border
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
          height="calc(100vh - 340px)"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column
                            type="selection"
                            width="55">
        >
          <el-table-column type="selection" min-width="50"> </el-table-column>
          <el-table-column type="index" label="序号" width="60">
            <template scope="scope">
              {{ (search.pageSize - 1) * search.countSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="dateArrival" label="产品大类">
            <template 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
                            label="日期"
                            width="120">
                            <template slot-scope="scope">{{ scope.row.date }}</template>
            prop="productName"
            label="产品名称"
            min-width="90"
            show-overflow-tooltip
          >
                            </el-table-column>
                            <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
          <el-table-column prop="specifications" label="规格型号">
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="地址"
                            show-overflow-tooltip>
          <el-table-column prop="number" label="不合格品数量">
          </el-table-column>
          <el-table-column label="现像描述" min-width="150">
            <template scope="scope">
              <el-input
                size="small"
                v-model="scope.row.description"
                @blur="outOfFocusDescription(scope)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="处置意见">
            <template scope="scope">
              <el-button type="text" @click="showDisposalOpinions(scope)"
                >查看处置意见</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="user_name" label="申请人"> </el-table-column>
          <el-table-column prop="date" label="日期"> </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="操作" width="130">
            <template 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-card>
                    <el-col style="height: 50px;display: flex;align-items: center;justify-content: right;">
        <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" 
            :current-page="search.pageSize"
            :page-sizes="[10, 15, 20, 30, 50]"
            :page-size="search.countSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="countSize">
            :total="total"
          >
                        </el-pagination>
                    </el-col>
      </el-card>
                </div>           
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form label-width="130px">
        <div v-for="item in updateEditList" :key="item.$index">
          <el-form-item
            :label="
              item.type == 0
                ? '技术部处置意见：'
                : item.type == 1
                ? '生产部处置意见：'
                : item.type == 2
                ? '质量部处置意见：'
                : '总经办处置意见：'
            "
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="item.tell"
            >
            </el-input>
          </el-form-item>
          <el-row v-if="isShow == true">
            <el-col :span="12">
              <el-form-item label="填写人：" v-if="isShow == true">
                {{ item.name }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="填写日期：" v-if="isShow == true">
                {{ item.fillDate }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="处置方式：">
            <el-radio-group v-model="item.way">
              <el-radio :label="0">返工</el-radio>
              <el-radio :label="1">返修</el-radio>
              <el-radio :label="2">让步接收</el-radio>
              <el-radio :label="3">拒收</el-radio>
              <el-radio :label="4">降级使用</el-radio>
              <el-radio :label="5">报废</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider v-if="item.type != 3"></el-divider>
            </div>       
        </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:''
      isShow: false,
      search: {
        countSize: 10, // 条数/页
        pageSize: 1, // 起始页
        productCategories: "", // 产品大类
        productName: "", // 产品名称
        specificationModel: "", // 规格型号
        state: "" // 状态
        },
        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:''
      }
      unqualifiedTable: [], // 页面表格数据
      total: 0, // 总条数
      dialogVisible: false, // 显示弹出框
      updateEditList: []
    };
    },
    created(){
        // this.getDetailInfo()
  mounted() {
    this.getDetailInfo();
    },
    methods:{
        handleSelectionChange(val) {
            // console.log(val);
        // this.multipleSelection = val;
      },
    // 分页
        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);
      this.axios
        .get(this.$api.url.getTable, {
          params: this.search
            })            
            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
            // })
        .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();
    },
    // 点击查看处置意见
    showDisposalOpinions(scope) {
      this.isShow = true;
      this.dialogVisible = true;
      this.$axios
        .get(this.$api.url.viewEditorial, {
          params: {
            rawUnacceptedId: scope.row.id
        }
}}
    //   methods:{
    //     toggleSelection(rows) {
    //     if (rows) {
    //       rows.forEach(row => {
    //         this.$refs.multipleTable.toggleRowSelection(row);
    //       });
    //     } else {
    //       this.$refs.multipleTable.clearSelection();
    //     }
    //   },
    
    //  }
    // }
  

        })
        .then(res => {
          this.updateEditList = res.data;
        });
    },
    // 点击编辑意见
    clickEditorialOpinion(scope) {
      this.dialogVisible = true;
      this.axios
        .get(this.$api.url.clickEditing, {
          params: { rawUnacceptedId: scope.row.id }
        })
        .then(res => {
          this.updateEditList = res.data;
        });
    },
    // 失去现像描述焦点触发
    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() {
      this.$axios
        .post(this.$api.url.addOpinion, this.updateEditList, {
          headers: { "Content-Type": "application/json" }
        })
        .then(res => {
          console.log(`output->res`, res);
          this.dialogVisible = false;
        });
    }
  },
  watch: {
    dialogVisible: {
      handler(newVal, oldVal) {
        if (newVal == false) {
          this.isShow = false;
        }
      }
    }
  }
};
</script>

<style scoped>
.card-2{
.main_div {
  padding-top: 15px;
}
.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;
    margin-top: 30px;
  flex-direction: column;
  /* overflow-y: scroll; */
}
.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 {
  padding: 21px 24px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 3px solid rgb(245, 247, 251);
}

.ssss{
    background-color: #fff;
.choose {
  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;
}
<!-- /* 不合格表格样式 */
    .unqualifiedTable {
  flex: 1;
  background: #fff;
  margin-top: 11px;
  padding: 23px 21px;
}
.tableno {
  margin-top: 10px;
}
</style>