update 压机报工页面
This commit is contained in:
parent
3adabb68b8
commit
58f86a9b2b
@ -16,6 +16,14 @@
|
||||
<!-- :class="{ 'pms-dialog--rotate-down': startLeave }"> -->
|
||||
<span slot="title" class="dialog-title">报工预览</span>
|
||||
|
||||
<!-- 面包屑导航 -->
|
||||
<div style="padding: 12px; background: #f7f7f7">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>预报工单</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-if="mode.includes('form')">编辑</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<transition class="l" mode="out-in">
|
||||
<BaseListTable
|
||||
v-if="mode.includes('table')"
|
||||
@ -25,15 +33,67 @@
|
||||
@operate-event="handleOperate"
|
||||
:current-page="page"
|
||||
:current-size="size" />
|
||||
<form action="#" v-if="mode.includes('form')">
|
||||
<h1>编辑</h1>
|
||||
<el-button type="text" size="small" @click="mode = 'table'">返回</el-button>
|
||||
</form>
|
||||
|
||||
<el-form
|
||||
v-if="mode.includes('form')"
|
||||
ref="dataForm"
|
||||
:model="dataForm"
|
||||
size="small"
|
||||
style="padding: 16px"
|
||||
v-loading="formLoading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单号" prop="orderCode" :rules="null">
|
||||
<el-input v-model="dataForm.orderCode" disabled placeholder="-" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="订单子号" prop="orderCate" :rules="null">
|
||||
<el-input v-model="dataForm.orderCate" disabled placeholder="-" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<!-- 总量 - 前端计算 -->
|
||||
<el-form-item label="生产总量" prop="qty" :rules="null">
|
||||
<el-input v-model="dataForm.qty" disabled placeholder="-" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="合格砖数量" prop="goodqty" :rules="[$fv.isRequired, $fv.isNumber]">
|
||||
<el-input v-model="dataForm.goodqty" placeholder="请输入合格砖数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="报废砖数量" prop="badqty" :rules="[$fv.isRequired, $fv.isNumber]">
|
||||
<el-input v-model="dataForm.badqty" placeholder="请输入报废砖数量" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<!-- 报废率 - 前端计算 -->
|
||||
<el-form-item label="报废率" prop="badratio" :rules="null">
|
||||
<el-input v-model="dataForm.badratio" disabled placeholder="-" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="报工班次" prop="team" :rules="null">
|
||||
<el-input v-model="dataForm.team" placeholder="请输入报工班次" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8" style="padding-top: 32px">
|
||||
<el-button type="primary" size="small" @click="handleSaveEdit">预保存</el-button>
|
||||
<el-button size="small" @click="mode = 'table'">取消</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</transition>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="close">取消</el-button>
|
||||
<el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
|
||||
<el-button size="small" type="primary" @click="handleConfirm">提交更改</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@ -53,6 +113,18 @@ export default {
|
||||
loading: false,
|
||||
dataList: [],
|
||||
page: 1,
|
||||
dataForm: {
|
||||
id: null,
|
||||
orderCate: null,
|
||||
orderCode: null,
|
||||
qty: null,
|
||||
goodqty: null,
|
||||
badqty: null,
|
||||
badratio: null,
|
||||
team: null,
|
||||
},
|
||||
formLoading: false,
|
||||
dataFormList: [],
|
||||
tableProps: [
|
||||
{ prop: "orderCode", label: "订单号" },
|
||||
{ prop: "orderCate", label: "订单子号" },
|
||||
@ -73,7 +145,7 @@ export default {
|
||||
width: 90,
|
||||
subcomponent: TableOperaionComponent,
|
||||
options: [
|
||||
{ name: "edit", label: "编辑", icon: "edit-outline" },
|
||||
{ name: "edit", label: "编辑", icon: "edit-outline", emitFull: true },
|
||||
// {
|
||||
// name: "delete",
|
||||
// icon: "delete",
|
||||
@ -84,6 +156,7 @@ export default {
|
||||
],
|
||||
},
|
||||
],
|
||||
currentEditing: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -91,6 +164,18 @@ export default {
|
||||
return this.dataList.length;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
"dataForm.goodqty"(val) {
|
||||
const qty = +val + +this.dataForm.badqty;
|
||||
this.dataForm.qty = qty;
|
||||
this.dataForm.badratio = ((+this.dataForm.badqty / qty) * 100).toFixed(2);
|
||||
},
|
||||
"dataForm.badqty"(val) {
|
||||
const qty = +val + +this.dataForm.goodqty;
|
||||
this.dataForm.qty = qty;
|
||||
this.dataForm.badratio = ((+val / qty) * 100).toFixed(2);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.visible = true;
|
||||
@ -100,32 +185,87 @@ export default {
|
||||
ids: this.ids,
|
||||
});
|
||||
if (res.code === 0) {
|
||||
this.dataList = res.data.map((item) => ({
|
||||
this.dataList = res.data.map((item, index) => ({
|
||||
...item,
|
||||
qty: item.goodqty + item.badqty,
|
||||
// 该 __LOCAL_INDEX 用于更新本地缓存数据
|
||||
__LOCAL_INDEX: index,
|
||||
}));
|
||||
console.log("this.datalist", this.dataList);
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
handleOperate({ type, data }) {
|
||||
console.log("payload", type, data);
|
||||
switch (type) {
|
||||
case "edit":
|
||||
this.mode = "form";
|
||||
this.currentEditing = data.__LOCAL_INDEX;
|
||||
const { id, orderCate, orderCode, qty, goodqty, badqty, badratio, team } = data;
|
||||
this.dataForm = {
|
||||
id,
|
||||
orderCate,
|
||||
orderCode,
|
||||
qty,
|
||||
goodqty,
|
||||
badqty,
|
||||
badratio,
|
||||
team,
|
||||
};
|
||||
break;
|
||||
}
|
||||
},
|
||||
handleConfirm() {},
|
||||
|
||||
async handleConfirm() {
|
||||
this.loading = true;
|
||||
const { data: res } = await this.$http.post("/pms/workReport/pressReport", {
|
||||
datas: this.dataList,
|
||||
ids: this.ids,
|
||||
});
|
||||
this.loading = false;
|
||||
if (res.code === 0) {
|
||||
this.$message.success("提交成功");
|
||||
this.$emit('refresh-list')
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
// 本地缓存编辑过的数据，保存时一并提交给服务器
|
||||
handleSaveEdit() {
|
||||
Object.keys(this.dataForm).forEach((key) => {
|
||||
this.dataList[this.currentEditing][key] = this.dataForm[key];
|
||||
});
|
||||
this.mode = "table";
|
||||
this.$nextTick(() => {
|
||||
this.clearDataForm();
|
||||
});
|
||||
},
|
||||
|
||||
// 清空输入数据
|
||||
clearDataForm() {
|
||||
this.currentEditing = null;
|
||||
this.dataForm = {
|
||||
id: null,
|
||||
orderCate: null,
|
||||
orderCode: null,
|
||||
qty: null,
|
||||
goodqty: null,
|
||||
badqty: null,
|
||||
badratio: null,
|
||||
team: null,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-just-form >>> .dialog-title {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dialog-just-form >>> .el-dialog__body {
|
||||
|
||||
@ -23,7 +23,8 @@ import { hasPermission, getDictLabel } from '@/utils'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
// main.js
|
||||
import myComponents from 'code-brick-zj'
|
||||
|
||||
// 表单验证
|
||||
import { formValidateRules } from '@/utils/validate'
|
||||
|
||||
// import mocks from './mocks'
|
||||
|
||||
@ -44,6 +45,7 @@ Vue.use(myComponents)
|
||||
Vue.prototype.$http = http
|
||||
Vue.prototype.$hasPermission = hasPermission
|
||||
Vue.prototype.$getDictLabel = getDictLabel
|
||||
Vue.prototype.$fv = formValidateRules
|
||||
|
||||
// 保存整站vuex本地储存初始状态
|
||||
window.SITE_CONFIG['storeState'] = cloneDeep(store.state)
|
||||
|
||||
@ -2,30 +2,47 @@
|
||||
* 邮箱
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isEmail (s) {
|
||||
return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
|
||||
export function isEmail(s) {
|
||||
return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* 手机号码
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isMobile (s) {
|
||||
return /^1[0-9]{10}$/.test(s)
|
||||
export function isMobile(s) {
|
||||
return /^1[0-9]{10}$/.test(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* 电话号码
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isPhone (s) {
|
||||
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
|
||||
export function isPhone(s) {
|
||||
return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* URL地址
|
||||
* @param {*} s
|
||||
*/
|
||||
export function isURL (s) {
|
||||
return /^http[s]?:\/\/.*/.test(s)
|
||||
export function isURL(s) {
|
||||
return /^http[s]?:\/\/.*/.test(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单验证
|
||||
*/
|
||||
export const formValidateRules = {
|
||||
isRequired: {
|
||||
required: true,
|
||||
message: "必填项",
|
||||
trigger: "blur",
|
||||
},
|
||||
isNumber: {
|
||||
type: "number",
|
||||
message: "请输入正确的数字类型",
|
||||
trigger: "blur",
|
||||
transform: (val) => Number(val),
|
||||
},
|
||||
};
|
||||
|
||||
@ -68,6 +68,7 @@
|
||||
ref="car-report-dialog"
|
||||
v-if="carReportDialogVisible"
|
||||
@destroy="carReportDialog = false"
|
||||
@refresh-list="getList"
|
||||
:ids="tableSelectedIds" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user