|
@@ -1,46 +1,74 @@
|
|
|
<template>
|
|
|
- <div class='planComponentDetil'>
|
|
|
- <div class="planComponentDetil-top">
|
|
|
- <div style="color: #02A7F0;cursor: pointer;" @click="toBack()"><i class="el-icon-arrow-left" style="padding-right: 10px;"></i>{{ leftText }}</div>
|
|
|
- <div>{{ topText }}</div>
|
|
|
- <div></div>
|
|
|
+ <div class="planComponentDetil">
|
|
|
+ <div class="planComponentDetil-top">
|
|
|
+ <div style="color: #02a7f0; cursor: pointer" @click="toBack()">
|
|
|
+ <i class="el-icon-arrow-left" style="padding-right: 10px"></i
|
|
|
+ >{{ leftText }}
|
|
|
+ </div>
|
|
|
+ <div>{{ topText }}</div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="planComponentDetil-con">
|
|
|
+ <!-- tab 切换 -->
|
|
|
+ <div class="today-tab">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in textArr"
|
|
|
+ :key="index"
|
|
|
+ :class="`${TabIndex === index ? 'on' : ''}`"
|
|
|
+ @click="tabChange(item, index)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
</div>
|
|
|
- <div class="planComponentDetil-con">
|
|
|
- <!-- tab 切换 -->
|
|
|
- <div class="today-tab">
|
|
|
- <div v-for="item,index in textArr" :key="index" :class="`${TabIndex === index ? 'on' : ''}`" @click="tabChange(item, index)">{{ item.name }}</div>
|
|
|
- </div>
|
|
|
- <!-- table数据 -->
|
|
|
- <div v-if="TabIndex == 0" v-loading="tableDataLoading">
|
|
|
- <el-table
|
|
|
- :data="JobtableData"
|
|
|
- :key="tableKey"
|
|
|
- style="width: 100%;"
|
|
|
- v-loading="tableDataLoading">
|
|
|
- <el-table-column label="工序名称" width="400">
|
|
|
- <template slot-scope="scope">{{ scope.row.prodProcedure.name }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="单件工时" width="150">
|
|
|
- <template slot-scope="scope">{{ scope.row.prodProcedure.workingTime }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="总工时" width="150">
|
|
|
- <template slot-scope="scope">{{ scope.row.totalWorkingHours }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="单件工价" width="150">
|
|
|
- <template slot-scope="scope">{{ scope.row.prodProcedure.unitPrice }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="总工价">
|
|
|
- <template slot-scope="scope">{{ scope.row.totalWages }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="质检类型">
|
|
|
- <template slot-scope="scope">{{ scope.row.prodProcedure.checkType==0?"自检": scope.row.prodProcedure.checkType==1?"互检":"专检"}}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="组员" width="150">
|
|
|
- <template slot-scope="scope">{{ scope.row.teamNames }}</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <!-- <div v-if="TabIndex == 1" v-loading="tableDataLoading">
|
|
|
+ </div>
|
|
|
+ <!-- table数据 -->
|
|
|
+ <div v-if="TabIndex == 0" v-loading="tableDataLoading">
|
|
|
+ <el-table
|
|
|
+ :data="JobtableData"
|
|
|
+ :key="tableKey"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="tableDataLoading"
|
|
|
+ >
|
|
|
+ <el-table-column label="工序名称" width="400">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div class="disFlexscope">
|
|
|
+ <span v-if="!scope.row.needAddCircle" class="yuanquan"></span>
|
|
|
+ <span>{{ scope.row.prodProcedure.name }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="单件工时" width="150">
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.prodProcedure.workingTime
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总工时" width="150">
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.totalWorkingHours
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="单件工价" width="150">
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.prodProcedure.unitPrice
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总工价">
|
|
|
+ <template slot-scope="scope">{{ scope.row.totalWages }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="质检类型">
|
|
|
+ <template slot-scope="scope">{{
|
|
|
+ scope.row.prodProcedure.checkType == 0
|
|
|
+ ? "自检"
|
|
|
+ : scope.row.prodProcedure.checkType == 1
|
|
|
+ ? "互检"
|
|
|
+ : "专检"
|
|
|
+ }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="组员" width="150">
|
|
|
+ <template slot-scope="scope">{{ scope.row.teamNames }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="TabIndex == 1" v-loading="tableDataLoading">
|
|
|
<el-table
|
|
|
:data="MaterialtableData"
|
|
|
:key="tableKey"
|
|
@@ -87,125 +115,145 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- <!-- <div class="planComponentDetil-bon">3</div> -->
|
|
|
</div>
|
|
|
+ <!-- <div class="planComponentDetil-bon">3</div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: '',
|
|
|
- components: {},
|
|
|
- props: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- topText: '',
|
|
|
- leftText: '',
|
|
|
- id: '',
|
|
|
- textArr: [{name: '派工单查看', value: 0}],
|
|
|
- // textArr: [{name: '派工单查看', value: 0}, {name: '物料单查看', value: 1}],
|
|
|
- TabIndex: 0,
|
|
|
- tableDataLoading: false,
|
|
|
- JobtableData: [],
|
|
|
- MaterialtableData:[],
|
|
|
- LackMaterialtableData:[],
|
|
|
- tableKey: 1
|
|
|
- }
|
|
|
+ name: "",
|
|
|
+ components: {},
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ topText: "",
|
|
|
+ leftText: "",
|
|
|
+ id: "",
|
|
|
+ textArr: [{ name: "派工单查看", value: 0 }],
|
|
|
+ // textArr: [{name: '派工单查看', value: 0}, {name: '物料单查看', value: 1}],
|
|
|
+ TabIndex: 0,
|
|
|
+ tableDataLoading: false,
|
|
|
+ JobtableData: [],
|
|
|
+ MaterialtableData: [],
|
|
|
+ LackMaterialtableData: [],
|
|
|
+ tableKey: 1,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ // const { id, topText, leftText } = this.$route.params
|
|
|
+ // const { id, topText, leftText } = this.$route.query
|
|
|
+ // console.log(this.$route.query, '携带')
|
|
|
+ const planDetilData = JSON.parse(localStorage.getItem("planDetilData"));
|
|
|
+ const { id, productSchedulingNum, productName } = planDetilData;
|
|
|
+ this.id = id;
|
|
|
+ this.topText = productSchedulingNum;
|
|
|
+ this.leftText = productName;
|
|
|
+ this.getPlanDetail();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toBack() {
|
|
|
+ this.$router.go(-1);
|
|
|
},
|
|
|
- computed: {},
|
|
|
- watch: {},
|
|
|
- created() { },
|
|
|
- mounted() {
|
|
|
- // const { id, topText, leftText } = this.$route.params
|
|
|
- // const { id, topText, leftText } = this.$route.query
|
|
|
- // console.log(this.$route.query, '携带')
|
|
|
- const planDetilData = JSON.parse(localStorage.getItem('planDetilData'))
|
|
|
- const { id, productSchedulingNum, productName } = planDetilData
|
|
|
- this.id = id
|
|
|
- this.topText = productSchedulingNum
|
|
|
- this.leftText = productName
|
|
|
- this.getPlanDetail()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- toBack() {
|
|
|
- this.$router.go(-1)
|
|
|
- },
|
|
|
- tabChange(item, index) {
|
|
|
- this.TabIndex = index
|
|
|
- this.getPlanDetail()
|
|
|
- },
|
|
|
- getPlanDetail(){
|
|
|
- this.tableDataLoading = true
|
|
|
- this.http.post( '/plan/planDetail', {
|
|
|
- id:this.id,
|
|
|
- type:this.textArr[this.TabIndex].value
|
|
|
+ tabChange(item, index) {
|
|
|
+ this.TabIndex = index;
|
|
|
+ this.getPlanDetail();
|
|
|
+ },
|
|
|
+ getPlanDetail() {
|
|
|
+ this.tableDataLoading = true;
|
|
|
+ this.http.post(
|
|
|
+ "/plan/planDetail",
|
|
|
+ {
|
|
|
+ id: this.id,
|
|
|
+ type: this.textArr[this.TabIndex].value,
|
|
|
},
|
|
|
- res => {
|
|
|
- this.tableDataLoading = false
|
|
|
- if (res.code == "ok") {
|
|
|
- this.tableKey++
|
|
|
- this.JobtableData=res.data
|
|
|
- this.MaterialtableData=res.data.material
|
|
|
- this.LackMaterialtableData=res.data.lackMaterial
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
- }
|
|
|
- },error => {
|
|
|
- this.tableDataLoading = false
|
|
|
+ (res) => {
|
|
|
+ this.tableDataLoading = false;
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.tableKey++;
|
|
|
+ this.JobtableData = res.data;
|
|
|
+ this.MaterialtableData = res.data.material;
|
|
|
+ this.LackMaterialtableData = res.data.lackMaterial;
|
|
|
+ } else {
|
|
|
this.$message({
|
|
|
- message: error,
|
|
|
- type: "error"
|
|
|
+ message: res.msg,
|
|
|
+ type: "error",
|
|
|
});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ this.tableDataLoading = false;
|
|
|
+ this.$message({
|
|
|
+ message: error,
|
|
|
+ type: "error",
|
|
|
});
|
|
|
}
|
|
|
+ );
|
|
|
},
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped lang='scss'>
|
|
|
- * {
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .planComponentDetil {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- // flex-direction: inherit;
|
|
|
- flex-direction: column;
|
|
|
- box-sizing: border-box;
|
|
|
- // padding: 20px;
|
|
|
- .planComponentDetil-top, .planComponentDetil-con, .planComponentDetil-bon {
|
|
|
- width: 100%;
|
|
|
- padding: 20px 20px;
|
|
|
- border-bottom: 1px solid #c5c5c5;
|
|
|
- }
|
|
|
- .planComponentDetil-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .planComponentDetil-con {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .today-tab {
|
|
|
- display: flex;
|
|
|
- overflow-x: auto;
|
|
|
- div {
|
|
|
- font-size: 18px;
|
|
|
- margin-left: 15px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .on {
|
|
|
- color: #02A7F0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.yuanquan {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 4px solid red;
|
|
|
+ margin-right: 4px;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+}
|
|
|
+.disFlexscope {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+}
|
|
|
+.planComponentDetil {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // flex-direction: inherit;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding: 20px;
|
|
|
+ .planComponentDetil-top,
|
|
|
+ .planComponentDetil-con,
|
|
|
+ .planComponentDetil-bon {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 20px;
|
|
|
+ border-bottom: 1px solid #c5c5c5;
|
|
|
+ }
|
|
|
+ .planComponentDetil-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .planComponentDetil-con {
|
|
|
+ flex: 1;
|
|
|
|
|
|
- .quesa-text {
|
|
|
- font-size: 16px;
|
|
|
- padding: 20px 0;
|
|
|
- }
|
|
|
+ .today-tab {
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ div {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .on {
|
|
|
+ color: #02a7f0;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .quesa-text {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|