9-24 加班

XiaoRuby

2023-09-24 abba64c23543cd806ed8864a9a976408618a5f45

 src/components/view/Processingproducts.vue

@@ -1,404 +1,285 @@
<template>
  <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-col>
    </el-row>
    <div style="margin-top: 10px;">
      <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 class="tableno" style="height:300px">
      <el-card shadow="hover" class="margin-30">
        <el-table
          :data="unqualifiedTable"
          border
          ref="multipleTable"
          tooltip-effect="dark"
          height="calc(100vh - 340px)"
          style="width: 100%"
        >
          <el-table-column type="selection" min-width="50"> </el-table-column>
          <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="产品大类">
            <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="90"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="specifications" label="规格型号">
          </el-table-column>
          <el-table-column prop="number" label="不合格品数量">
          </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="处置意见">
            <template slot-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 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="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>
    <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-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>
        </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>
            </el-card>
        </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>
        <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 {
      isShow: false,
      search: {
        countSize: 10, // 条数/页
        pageSize: 1, // 起始页
        productCategories: "", // 产品大类
        productName: "", // 产品名称
        specificationModel: "", // 规格型号
        state: "" // 状态
      },
      unqualifiedTable: [], // 页面表格数据
      total: 0, // 总条数
      dialogVisible: false, // 显示弹出框
      updateEditList: []
    };
  },
  mounted() {
    this.getDetailInfo();
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.search.countSize = val;
      this.getDetailInfo();
    data() {
        return {
            isShow: false,
            search: {
                countSize: 10, // 条数/页
                pageSize: 1, // 起始页
                productCategories: "", // 产品大类
                productName: "", // 产品名称
                specificationModel: "", // 规格型号
                state: "", // 状态
            },
            unqualifiedTable: [], // 页面表格数据
            total: 0, // 总条数
            dialogVisible: false, // 显示弹出框
            clickEditOpinion: "", // 点击编辑意见临时存储该行数据
        };
    },
    // 分页
    handleCurrentChange(val) {
      this.search.pageSize = val;
      this.getDetailInfo();
    mounted() {
        this.getDetailInfo();
    },
    // 分页表格数据
    getDetailInfo() {
      this.axios
        .get(this.$api.url.getTable, {
          params: this.search
        })
        .then(res => {
          this.unqualifiedTable = res.data.row;
          this.total = res.data.total;
        });
    methods: {
        // 分页
        handleSizeChange(val) {
            this.search.countSize = val;
            this.getDetailInfo();
        },
        // 分页
        handleCurrentChange(val) {
            this.search.pageSize = val;
            this.getDetailInfo();
        },
        // 分页表格数据
        getDetailInfo() {
            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",
                    });
                });
        },
    },
    // 重置按钮
    clean() {
      this.search = {
        countSize: 10, // 条数/页
        pageSize: 1, // 起始页
        productCategories: "", // 产品大类
        productName: "", // 产品名称
        specificationModel: "", // 规格型号
        state: "" // 状态
      };
      this.getDetailInfo();
    watch: {
        dialogVisible: {
            handler(newVal, oldVal) {
                if (newVal == false) {
                    this.isShow = false;
                }
            },
        },
    },
    // 点击查看处置意见
    showDisposalOpinions(scope) {
      this.isShow = true;
      this.dialogVisible = true;
      this.$axios
        .get(this.$api.url.viewEditorial, {
          params: {
            rawUnacceptedId: scope.row.id
          }
        })
        .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,
          { opinion: 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>
.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;
  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);
    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;
    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 {
  font-size: 14px;
    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;
    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;
.choose span {
    /* span内容强制不换行 */
    white-space: nowrap;
}

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