nw-cqdevicemgt-ui/src/views/repairTest/repair/dialogTwoForm.vue

706 lines
25 KiB
Vue
Raw Normal View History

2024-08-29 10:27:08 +08:00
<template>
<el-dialog
v-dialogDrag
v-loading.fullscreen.lock="fullscreenLoading"
:before-close="cancel"
:title="dialogTitle"
:visible.sync="dialogShowFlag"
append-to-body
width="600px"
>
<div class="form_box_one">
<el-form
ref="dynamicValidateForm"
:model="dynamicValidateForm"
class="demo-dynamic"
label-width="100px"
>
<div
v-for="(domain, index) in dynamicValidateForm.premiumList"
:key="domain.key"
class="bor_box"
>
<p class="form_box_title">编码管理设备</p>
<div class="form_box_line"></div>
<div class="form_box_item">
<!-- :rules="{
required: true,
message: '保费不能为空',
trigger: 'blur',
}"
label="选择配件:" -->
<el-form-item
:prop="'premiumList.' + index + '.partName'"
label="配件名称:"
>
<el-input
v-model="domain.partName"
placeholder="请输入"
size="small"
maxlength="50"
style="width: 350px"
></el-input>
</el-form-item>
<el-form-item
:prop="'premiumList.' + index + '.partType'"
label="是否收费:"
required
:rules="{
required: true,
message: '请选择是否收费',
trigger: 'blur',
}"
>
<el-radio-group
style="width: 350px"
v-model="domain.partType"
>
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="index == 0"
:prop="'premiumList.' + index + '.supplierId'"
label="选择厂家:"
:rules="{
message: '请选择厂家',
required: true,
trigger: 'blur',
}"
>
<el-select
v-model="domain.supplierId"
placeholder="请选择"
size="small"
filterable
style="width: 350px"
>
<el-option
v-for="dict in supplierSelectList"
:key="dict.supplierId"
:label="dict.supplier"
:value="dict.supplierId"
/>
</el-select>
</el-form-item>
<!-- <el-form-item
:prop="'premiumList.' + index + '.partPrice'"
label="配件单价(元)"
label-width="120px"
:rules="{
required: false,
validator: meneyIntegerValidator,
trigger: 'blur',
}"
> -->
<el-form-item
v-if="domain.partType == 1"
:prop="'premiumList.' + index + '.partPrice'"
label="配件单价(元)"
label-width="120px"
>
<el-input
v-model="domain.partPrice"
placeholder="请输入"
size="small"
maxlength="10"
style="width: 330px"
></el-input>
</el-form-item>
<el-form-item
:prop="'premiumList.' + index + '.partNum'"
label="配件数量:"
:rules="{
required: false,
2024-09-25 10:22:45 +08:00
// validator: numberIntegerValidator,
2024-08-29 10:27:08 +08:00
trigger: 'blur',
}"
>
<el-input
v-model="domain.partNum"
placeholder="请输入"
size="small"
maxlength="10"
style="width: 350px"
></el-input>
</el-form-item>
<el-form-item
:prop="'premiumList.' + index + '.repairContent'"
label="维修内容:"
>
<el-input
v-model="domain.repairContent"
maxlength="100"
placeholder="请输入"
show-word-limit
size="small"
style="width: 350px"
type="textarea"
></el-input>
</el-form-item>
</div>
</div>
</el-form>
<div
slot="footer"
class="dialog-footer"
v-if="rowObj.code !== null && rowObj.code !== ''"
>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submit">保存</el-button>
</div>
</div>
<div class="form_box_two">
<el-form
ref="dynamicValidateFormTwo"
:model="dynamicValidateFormTwo"
class="demo-dynamic"
label-width="100px"
>
<div
v-for="(
domain, index
) in dynamicValidateFormTwo.premiumListTwo"
:key="domain.key"
class="bor_box"
>
<p class="form_box_title">数量管理设备</p>
<div class="form_box_line"></div>
<div class="form_box_item">
<!-- :rules="{
required: true,
message: '保费不能为空',
trigger: 'blur',
}"
label="选择配件:" -->
<el-form-item
:prop="'premiumListTwo.' + index + '.repairNum'"
label="维修数量:"
:rules="{
required: true,
validator: numberIntegerValidator,
trigger: 'blur',
}"
>
<el-input
v-model="domain.repairNum"
placeholder="请输入"
size="small"
maxlength="10"
style="width: 350px"
></el-input>
</el-form-item>
<el-form-item label="配件名称:">
<el-input
v-model="domain.partName"
placeholder="请输入"
size="small"
maxlength="50"
style="width: 350px"
></el-input>
</el-form-item>
<el-form-item
label="是否收费:"
required
:rules="{
required: true,
message: '请选择是否收费',
trigger: 'blur',
}"
>
<el-radio-group
style="width: 350px"
v-model="domain.partType"
>
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="index == 0"
:prop="'premiumListTwo.' + index + '.supplierId'"
label="选择厂家:"
:rules="{
message: '请选择厂家',
required: true,
trigger: 'blur',
}"
>
<el-select
v-model="domain.supplierId"
placeholder="请选择"
size="small"
filterable
style="width: 350px"
>
<el-option
v-for="dict in supplierSelectList"
:key="dict.supplierId"
:label="dict.supplier"
:value="dict.supplierId"
/>
</el-select>
</el-form-item>
<!-- <el-form-item
:prop="'premiumListTwo.' + index + '.partPrice'"
label="配件单价(元)"
label-width="120px"
:rules="{
required: false,
validator: meneyIntegerValidator,
trigger: 'blur',
}"
> -->
<el-form-item
v-if="domain.partType == 1"
label="配件单价(元)"
label-width="120px"
>
<el-input
v-model="domain.partPrice"
placeholder="请输入"
size="small"
maxlength="10"
style="width: 330px"
></el-input>
</el-form-item>
<el-form-item
label="配件数量:"
:rules="{
required: false,
validator: numberIntegerValidator,
trigger: 'blur',
}"
>
<el-input
v-model="domain.partNum"
placeholder="请输入"
size="small"
maxlength="10"
style="width: 350px"
></el-input>
</el-form-item>
<el-form-item label="维修内容:">
<el-input
v-model="domain.repairContent"
maxlength="100"
placeholder="请输入"
show-word-limit
size="small"
style="width: 350px"
type="textarea"
></el-input>
</el-form-item>
</div>
<!-- <el-button @click.prevent="removeDomain(domain, index)"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- <div class="add_box">
<el-button
icon="el-icon-plus"
size="mini"
type="success"
@click="addDomainTwo"
>添加配件
</el-button>
</div> -->
</div>
</el-form>
<div
slot="footer"
class="dialog-footer"
v-if="rowObj.code == null || rowObj.code == ''"
>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="submitTwo">保存</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import {
submitRepairApplyApi,
getUserSelectApi,
getRepairMaTypeListApi,
listPartType,
getSupplierSelectApi,
} from '@/api/repairTest/repair'
// import { listPartType, } from "@/api/store/tools";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getInfo } from '@/api/login'
export default {
components: { Treeselect },
props: {
// 弹窗是否显示
isShowFlag: {
type: Boolean,
default: false,
},
// 对应操作数据键值
priKey: {
type: [String, Number],
default: '',
},
//弹窗标题
dialogTitle: {
type: String,
default: '',
},
//弹窗标题
rowObj: {
type: Object,
default: {},
},
},
watch: {
isShowFlag(val) {
if (val) {
this.init()
}
},
},
computed: {
dialogShowFlag: {
get() {
return this.isShowFlag
},
set(v) {
this.$emit('update:isShowFlag', v)
},
},
},
data() {
return {
supplierSelectList: [],
fullscreenLoading: false,
dynamicValidateForm: {
premiumList: [
{
selected: 'Y',
premium: undefined,
rate: undefined,
feeRate: undefined,
fee: undefined,
baofei1_unit: '',
shangyoufeiyonge_unit: '',
downRate: undefined,
downFee: undefined,
xiayoufeiyonge_unit: '',
},
],
},
dynamicValidateFormTwo: {
premiumListTwo: [
{
selected: 'Y',
premium: undefined,
rate: undefined,
feeRate: undefined,
fee: undefined,
baofei1_unit: '',
shangyoufeiyonge_unit: '',
downRate: undefined,
downFee: undefined,
xiayoufeiyonge_unit: '',
},
],
},
userSelectList: [],
companyId: '',
taskId: '',
}
},
mounted() {
this.$eventBus.$on('taskId', (taskId) => {
this.taskId = taskId
})
this.getTree()
},
methods: {
//正则校验配件费用
meneyIntegerValidator(rule, value, callback) {
const reg =
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
if (value === '' || reg.test(value)) {
callback()
} else {
callback(new Error('请输入大于0的数'))
}
},
//正则校验配件数量--维修数量
numberIntegerValidator(rule, value, callback) {
const reg = /^\+?[1-9][0-9]*$/
if (reg.test(value) && value <= this.rowObj.repairNum) {
callback()
} else {
callback(new Error('请输入大于0的并且小于维修总量的正整数'))
}
},
getTree() {
listPartType().then((response) => {
this.deptList = this.handleTree(response.data, 'paId')
})
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.paId,
label: node.paName,
children: node.children,
}
},
getList() {
let params = {
taskId: this.taskId,
}
this.loading = true
getRepairMaTypeListApi(params).then((res) => {
if (res.code == 200) {
this.repairList = res.rows
this.total = res.total
this.loading = false
}
})
},
init() {
if (this.rowObj.code !== null && this.rowObj.code !== '') {
this.dynamicValidateForm.premiumList = []
this.dynamicValidateFormTwo.premiumListTwo = []
this.addDomainOne()
} else {
this.dynamicValidateForm.premiumList = []
this.dynamicValidateFormTwo.premiumListTwo = []
this.addDomainTwo()
}
getSupplierSelectApi().then((res) => {
this.supplierSelectList = res.data
})
},
// 取消按钮
cancel() {
this.dialogShowFlag = false
// this.$refs["form"].resetFields();
// this.dynamicValidateForm.premiumList = [];
},
addDomainOne() {
// 选择配件 partId
// 是否收费 partType
// 配件数量 partNum
// 配件费用 partCost
// 维修内容 repairContent
// 维修数量 repairNum
this.dynamicValidateForm.premiumList.push({
selected: 'N',
partName: '',
repairer: '',
partType: '',
partNum: '',
partCost: '',
repairContent: '',
supplierId: '',
partPrice: '',
repairNum: 1,
key: Date.now(),
})
},
addDomainTwo() {
this.dynamicValidateFormTwo.premiumListTwo.push({
selected: 'N',
partName: '',
repairer: '',
partType: '',
partNum: '',
partCost: '',
repairContent: '',
repairNum: '',
key: Date.now(),
})
},
submit() {
this.$refs['dynamicValidateForm'].validate((valid) => {
if (valid) {
this.dynamicValidateForm.premiumList.forEach((item) => {
item.partCost = item.partPrice
})
this.dynamicValidateForm.premiumList.forEach((e) => {
if (e.partType == 0) {
e.partCost = ''
}
})
// this.dynamicValidateForm.premiumList[0].partCost = this.dynamicValidateForm.premiumList[0].partPrice;
// 编码管理传递参数
console.log(
'this.dynamicValidateForm.premiumList1111)',
this.dynamicValidateForm.premiumList,
)
let params = {
taskId: this.rowObj.taskId,
maId: this.rowObj.maId,
typeId: this.rowObj.typeId,
id: this.rowObj.id,
repairType: 2,
companyId: this.companyId,
repairNum: 1,
partStrList: JSON.stringify(
this.dynamicValidateForm.premiumList,
),
}
this.fullscreenLoading = true
submitRepairApplyApi(params)
.then((res) => {
if (res.code == 200) {
this.getList()
this.fullscreenLoading = false
this.dialogShowFlag = false
this.$message.success('操作成功!')
this.$emit('domainChange', res.code)
}
})
.catch(() => {
this.fullscreenLoading = false
})
} else {
return false
}
})
},
submitTwo() {
this.$refs['dynamicValidateFormTwo'].validate((valid) => {
if (valid) {
// this.dynamicValidateFormTwo.premiumListTwo[0].partCost = this.dynamicValidateFormTwo.premiumListTwo[0].partPrice;
this.dynamicValidateFormTwo.premiumListTwo.forEach(
(item) => {
item.partCost = item.partPrice
},
)
this.dynamicValidateFormTwo.premiumListTwo.forEach((e) => {
if (e.partType == 0) {
e.partCost = ''
}
})
console.log(
'this.dynamicValidateFormTwo.premiumListTwo2222',
this.dynamicValidateFormTwo.premiumListTwo,
)
// 数量管理传递参数
let params = {
taskId: this.rowObj.taskId,
maId: this.rowObj.maId,
typeId: this.rowObj.typeId,
id: this.rowObj.id,
repairType: 2,
companyId: this.companyId,
repairNum: 1,
partStrList: JSON.stringify(
this.dynamicValidateFormTwo.premiumListTwo,
),
}
this.fullscreenLoading = true
submitRepairApplyApi(params)
.then((res) => {
if (res.code == 200) {
this.getList()
this.fullscreenLoading = false
this.dialogShowFlag = false
this.$message.success('操作成功!')
this.$emit('domainChange', res.code)
}
})
.catch(() => {
this.fullscreenLoading = false
})
} else {
return false
}
})
},
},
}
</script>
<style lang="scss" scoped>
.form_box_one {
width: 100%;
display: flex;
flex-direction: column;
.form_box_title {
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 12px;
}
.form_box_line {
margin: 8px 0;
width: 100%;
border-bottom: 2px solid #1a1c22;
}
.form_box_item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.add_box {
display: flex;
justify-content: flex-end;
margin-right: 3%;
}
}
.form_box_two {
display: flex;
flex-direction: column;
.form_box_title {
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 12px;
}
.form_box_line {
margin: 8px 0;
width: 100%;
border-bottom: 2px solid #1a1c22;
}
.form_box_item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.add_box {
display: flex;
justify-content: flex-end;
margin-right: 3%;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 3%;
margin-top: 10px;
}
</style>