358 lines
11 KiB
Vue
358 lines
11 KiB
Vue
|
<template>
|
||
|
|
<!-- 工程管理 新增、编辑 表单组件 -->
|
||
|
|
<div>
|
||
|
|
<el-form
|
||
|
|
label-width="100px"
|
||
|
|
size="medium"
|
||
|
|
ref="projectParamsRef"
|
||
|
|
:model="projectParams"
|
||
|
|
:rules="projectParamsRules"
|
||
|
|
>
|
||
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="项目部" prop="departId" >
|
||
|
|
<el-select
|
||
|
|
v-model="projectParams.departId"
|
||
|
|
clearable
|
||
|
|
filterable
|
||
|
|
placeholder="请选择"
|
||
|
|
@change="departChange"
|
||
|
|
disabled
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in departRange"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="工程名称" prop="proId">
|
||
|
|
<el-select
|
||
|
|
v-model="projectParams.proId"
|
||
|
|
clearable
|
||
|
|
filterable
|
||
|
|
placeholder="请选择"
|
||
|
|
@change="projChange"
|
||
|
|
disabled
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="item in projRange"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.label"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="申请人" prop="relUser">
|
||
|
|
<el-input v-model="projectParams.relUser" placeholder="请输入" disabled/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="联系方式" prop="relPhone">
|
||
|
|
<el-input v-model="projectParams.relPhone" :maxlength="11" placeholder="请输入" disabled/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<TableModelTwo
|
||
|
|
:columnsList="columnsListInsert"
|
||
|
|
ref="tableRef"
|
||
|
|
@transIdList="getIdList"
|
||
|
|
:show-btn-crews="false"
|
||
|
|
:show-right-tools="false"
|
||
|
|
:show-sel="false"
|
||
|
|
:show-index="false"
|
||
|
|
style="margin-bottom: 100px"
|
||
|
|
>
|
||
|
|
</TableModelTwo>
|
||
|
|
<el-form-item label="审核意见" prop="remarks">
|
||
|
|
<textarea id="remarks" v-model="projectParams.remarks" class="el-textarea" placeholder="请输入审核意见" disabled></textarea>
|
||
|
|
<!-- <el-input v-model="projectParams.relUser" placeholder="请输入" disabled/> -->
|
||
|
|
</el-form-item>
|
||
|
|
<el-row type="flex" justify="space-between" :gutter="24">
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="审批人" prop="auditUserName">
|
||
|
|
<el-input v-model="projectParams.auditUserName" placeholder="请输入审批人" disabled/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="审批时间" prop="auditTime">
|
||
|
|
<el-input v-model="projectParams.auditTime" placeholder="请输入审批时间" disabled/>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
|
||
|
|
<div
|
||
|
|
style="display: flex; justify-content: right"
|
||
|
|
>
|
||
|
|
<el-button type="danger" @click="onReturn">驳回</el-button>
|
||
|
|
<el-button type="success" @click="onSubmit">同意</el-button>
|
||
|
|
<!-- <el-button
|
||
|
|
@click="
|
||
|
|
() => {
|
||
|
|
this.$emit('closeDialog')
|
||
|
|
}
|
||
|
|
"
|
||
|
|
>驳回</el-button -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { columnsListInsert } from '../config-insert'
|
||
|
|
// import { formLabelApprove,columnsListApprove} from '../config-approve'
|
||
|
|
import {
|
||
|
|
// addEdgeDeviceApi,
|
||
|
|
// editEdgeDeviceApi,
|
||
|
|
approveEdgeDeviceApi,
|
||
|
|
queryEdgeDeviceByIdApi
|
||
|
|
} from '@/api/base/insert'
|
||
|
|
import {
|
||
|
|
queryProjApi
|
||
|
|
} from '@/api/base/crew'
|
||
|
|
import {
|
||
|
|
queryProjDeptListApi
|
||
|
|
} from '@/api/base/projDept'
|
||
|
|
export default {
|
||
|
|
name: 'FormProject',
|
||
|
|
props: {
|
||
|
|
editParams: {
|
||
|
|
type: Object,
|
||
|
|
default: () => null,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: { },
|
||
|
|
created() {
|
||
|
|
this.getRanges()
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log(this.editParams)
|
||
|
|
if (this.editParams) {
|
||
|
|
Object.assign(this.projectParams, this.editParams)
|
||
|
|
// this.projectParams.auditUserName = this.editParams.auditUserName
|
||
|
|
// this.projectParams.remarks = ''
|
||
|
|
// 查询所属设备
|
||
|
|
queryEdgeDeviceByIdApi(this.editParams.id).then(res => {
|
||
|
|
res.data.recordList.forEach(item => {
|
||
|
|
this.$refs.tableRef.tableList.unshift(item)
|
||
|
|
})
|
||
|
|
}).catch(err => {})
|
||
|
|
this.subSort = 2
|
||
|
|
} else {
|
||
|
|
this.subSort = 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
columnsListInsert,
|
||
|
|
exportList: [],
|
||
|
|
subSort: '', // 提交类型：新增 1 / 修改 2
|
||
|
|
projectParams: {
|
||
|
|
departId: undefined, //项目部
|
||
|
|
proId: undefined, //工程名称
|
||
|
|
relUser: undefined, // 申请人
|
||
|
|
relPhone: undefined, // 联系方式
|
||
|
|
remarks: undefined, // 审核意见
|
||
|
|
auditStatus: undefined, // 审核状态
|
||
|
|
auditUserName: undefined, // 审批人
|
||
|
|
auditTime: undefined, // 审批时间
|
||
|
|
},
|
||
|
|
// 校验规则
|
||
|
|
projectParamsRules: {
|
||
|
|
departId: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请输入项目部名称',
|
||
|
|
trigger: 'blur',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
proId: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请输入工程名称',
|
||
|
|
trigger: 'blur',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
relUser: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请输入申请人',
|
||
|
|
trigger: 'blur',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
relPhone: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '手机号格式不正确',
|
||
|
|
validator: this.validatePhone,
|
||
|
|
trigger: 'blur',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
remarks: [
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
message: '请输入审核意见',
|
||
|
|
trigger: 'blur',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
// 各类下拉
|
||
|
|
departRange: [],
|
||
|
|
projRange: [],
|
||
|
|
// 手机正则
|
||
|
|
phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||
|
|
testId: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/** 校验手机号 */
|
||
|
|
validatePhone(rule, value, callback) {
|
||
|
|
if(!this.phoneReg.test(value)) {
|
||
|
|
callback(new Error('手机号格式不正确'))
|
||
|
|
} else {
|
||
|
|
callback()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getIdList(idList) {
|
||
|
|
this.exportList = []
|
||
|
|
console.log(idList)
|
||
|
|
},
|
||
|
|
handleAddEdge() {
|
||
|
|
let setObj = {}
|
||
|
|
this.$set(setObj, 'testId', this.testId)
|
||
|
|
this.testId++
|
||
|
|
this.$set(setObj, 'devName', undefined)
|
||
|
|
this.$set(setObj, 'devCode', undefined)
|
||
|
|
this.$set(setObj, 'unitName', undefined)
|
||
|
|
this.$set(setObj, 'areaName', undefined)
|
||
|
|
this.$set(setObj, 'devUser', undefined)
|
||
|
|
this.$set(setObj, 'devUserPhone', undefined)
|
||
|
|
this.$refs.tableRef.tableList.push(setObj)
|
||
|
|
},
|
||
|
|
handleDeleteEdge(v) {
|
||
|
|
this.$modal
|
||
|
|
.confirm('是否确认删除该数据项？')
|
||
|
|
.then(() => {
|
||
|
|
this.$refs.tableRef.tableList.forEach((item, index) => {
|
||
|
|
if(item.testId === v.testId) {
|
||
|
|
this.$refs.tableRef.tableList.splice(index, 1)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.catch(() => {})
|
||
|
|
},
|
||
|
|
|
||
|
|
/** 获取各类下拉框 */
|
||
|
|
async getRanges() {
|
||
|
|
// 获取项目部下拉选
|
||
|
|
let deptRes = await queryProjDeptListApi({
|
||
|
|
isAll: 0
|
||
|
|
})
|
||
|
|
this.departRange = deptRes.data.map(item => {
|
||
|
|
return {
|
||
|
|
label: item.departName,
|
||
|
|
value: item.id
|
||
|
|
}
|
||
|
|
})
|
||
|
|
// 获取工程下拉选
|
||
|
|
let projRes = await queryProjApi({
|
||
|
|
isAll: 0
|
||
|
|
})
|
||
|
|
this.projRange = projRes.data.map(item => {
|
||
|
|
return {
|
||
|
|
label: item.proName,
|
||
|
|
value: item.id
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
departChange(e) {
|
||
|
|
this.departRange.forEach(item => {
|
||
|
|
if(e === item.value) {
|
||
|
|
this.projectParams.departName = item.label
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
projChange(e) {
|
||
|
|
this.projRange.forEach(item => {
|
||
|
|
if(e === item.value) {
|
||
|
|
this.projectParams.proName = item.label
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 改变树结构 */
|
||
|
|
changeTree(leaf) {
|
||
|
|
leaf.map(item => {
|
||
|
|
item.value = item.id
|
||
|
|
if(item.children) {
|
||
|
|
this.changeTree(item.children)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return leaf
|
||
|
|
},
|
||
|
|
/** 确认按钮 */
|
||
|
|
onSubmit() {
|
||
|
|
console.log(this.$refs.tableRef.tableList, this.projectParams)
|
||
|
|
this.$refs.projectParamsRef.validate(async valid => {
|
||
|
|
if (valid) {
|
||
|
|
this.projectParams.recordList = this.$refs.tableRef.tableList
|
||
|
|
this.projectParams.auditStatus = 1
|
||
|
|
// if(this.subSort === 1) {
|
||
|
|
// let res = await addEdgeDeviceApi(this.projectParams)
|
||
|
|
// if(res.code === 200) {
|
||
|
|
// this.$modal.msgSuccess('操作成功')
|
||
|
|
// this.$emit('closeDialog', true)
|
||
|
|
// }
|
||
|
|
// } else {
|
||
|
|
let res = await approveEdgeDeviceApi(this.projectParams)
|
||
|
|
if(res.code === 200) {
|
||
|
|
this.$modal.msgSuccess('操作成功')
|
||
|
|
this.$emit('closeDialogApprove', true)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onReturn() {
|
||
|
|
this.$refs.projectParamsRef.validate(async valid => {
|
||
|
|
if (valid) {
|
||
|
|
this.projectParams.recordList = this.$refs.tableRef.tableList
|
||
|
|
this.projectParams.auditStatus = 2
|
||
|
|
let res = await approveEdgeDeviceApi(this.projectParams)
|
||
|
|
if(res.code === 200) {
|
||
|
|
this.$modal.msgSuccess('操作成功')
|
||
|
|
this.$emit('closeDialogApprove', true)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
::v-deep .el-select {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
::v-deep .el-form-item__label{
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
.el-textarea {
|
||
|
|
width: 100%;
|
||
|
|
height: 100px;
|
||
|
|
resize: none;
|
||
|
|
}
|
||
|
|
</style>
|