组件优化
This commit is contained in:
BianLzhaoMin
parent
10c24e773c
commit
d0d4033842
File diff suppressed because it is too large
Load Diff
|
|
@ -1,357 +1,370 @@
|
|||
<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>
|
||||
<!-- 工程管理 新增、编辑 表单组件 -->
|
||||
<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
|
||||
:rows="4"
|
||||
type="textarea"
|
||||
v-model="projectParams.remarks"
|
||||
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>
|
||||
|
||||
<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 :rows="4" type="textarea" v-model="projectParams.remarks" 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
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnsListInsert } from '../config-insert'
|
||||
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'
|
||||
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,
|
||||
},
|
||||
name: "FormProject",
|
||||
props: {
|
||||
editParams: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
components: { },
|
||||
created() {
|
||||
this.getRanges()
|
||||
},
|
||||
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) => {
|
||||
console.log(res, "列表数据---");
|
||||
res.rows.forEach((item) => {
|
||||
this.$refs.tableRef.tableList.unshift(item);
|
||||
this.projectParams.auditUserName = item.auditUserName;
|
||||
});
|
||||
|
||||
this.$refs.tableRef.total = res.rows.length;
|
||||
})
|
||||
.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();
|
||||
}
|
||||
},
|
||||
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.rows.forEach(item => {
|
||||
this.$refs.tableRef.tableList.unshift(item)
|
||||
this.projectParams.auditUserName = item.auditUserName
|
||||
})
|
||||
}).catch(err => {})
|
||||
this.subSort = 2
|
||||
} else {
|
||||
this.subSort = 1
|
||||
}
|
||||
getIdList(idList) {
|
||||
this.exportList = [];
|
||||
console.log(idList);
|
||||
},
|
||||
data() {
|
||||
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 {
|
||||
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
|
||||
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;
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 校验手机号 */
|
||||
validatePhone(rule, value, callback) {
|
||||
if(!this.phoneReg.test(value)) {
|
||||
callback(new Error('手机号格式不正确'))
|
||||
} else {
|
||||
callback()
|
||||
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("closeDialogAll", true);
|
||||
}
|
||||
},
|
||||
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('closeDialogAll', 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('closeDialogAll', 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("closeDialogAll", true);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-form-item__label{
|
||||
::v-deep .el-form-item__label {
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-textarea {
|
||||
|
|
|
|||
|
|
@ -1,337 +1,343 @@
|
|||
<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>
|
||||
|
||||
|
||||
<!-- 工程管理 新增、编辑 表单组件 -->
|
||||
<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 :rows="4" type="textarea" v-model="projectParams.remarks" placeholder="请输入审核意见" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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
|
||||
:rows="4"
|
||||
type="textarea"
|
||||
v-model="projectParams.remarks"
|
||||
placeholder="请输入审核意见"
|
||||
/>
|
||||
</el-form-item>
|
||||
</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
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnsListInsert } from '../config-insert'
|
||||
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'
|
||||
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,
|
||||
},
|
||||
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.remarks = ''
|
||||
// 查询所属设备
|
||||
queryEdgeDeviceByIdApi(this.editParams.id).then(res => {
|
||||
res.rows.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, // 审核状态
|
||||
},
|
||||
// 校验规则
|
||||
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(() => {})
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
created() {
|
||||
this.getRanges();
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.editParams);
|
||||
if (this.editParams) {
|
||||
Object.assign(this.projectParams, this.editParams);
|
||||
this.projectParams.remarks = "";
|
||||
// 查询所属设备
|
||||
queryEdgeDeviceByIdApi(this.editParams.id)
|
||||
.then((res) => {
|
||||
res.rows.forEach((item) => {
|
||||
this.$refs.tableRef.tableList.unshift(item);
|
||||
});
|
||||
|
||||
/** 获取各类下拉框 */
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
this.$refs.tableRef.total = res.rows.length;
|
||||
})
|
||||
.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, // 审核状态
|
||||
},
|
||||
// 校验规则
|
||||
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%;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-form-item__label{
|
||||
::v-deep .el-form-item__label {
|
||||
font-weight: normal;
|
||||
}
|
||||
.el-textarea {
|
||||
|
|
|
|||
|
|
@ -1,332 +1,337 @@
|
|||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系方式" prop="relPhone">
|
||||
<el-input v-model="projectParams.relPhone" :maxlength="11" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<TableModel
|
||||
:columnsList="columnsListInsert"
|
||||
ref="tableRef"
|
||||
@transIdList="getIdList"
|
||||
:show-btn-crews="false"
|
||||
:show-right-tools="false"
|
||||
:show-sel="false"
|
||||
:show-index="false"
|
||||
style="margin-bottom: 100px"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button type="primary" @click="handleAddEdge" icon="el-icon-plus" size="mini"
|
||||
>添加边代设备</el-button
|
||||
<!-- 工程管理 新增、编辑 表单组件 -->
|
||||
<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"
|
||||
>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
@click="handleDeleteEdge(data)"
|
||||
>删除</el-button
|
||||
<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"
|
||||
>
|
||||
</template>
|
||||
<template slot="devName" slot-scope="{ data }">
|
||||
<el-input v-model="data.devName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devCode" slot-scope="{ data }">
|
||||
<el-input v-model="data.devCode" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="unitName" slot-scope="{ data }">
|
||||
<el-input v-model="data.unitName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="areaName" slot-scope="{ data }">
|
||||
<el-input v-model="data.areaName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devUser" slot-scope="{ data }">
|
||||
<el-input v-model="data.devUser" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devUserPhone" slot-scope="{ data }">
|
||||
<el-input v-model="data.devUserPhone" :maxlength="11" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
</TableModel>
|
||||
<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="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系方式" prop="relPhone">
|
||||
<el-input
|
||||
v-model="projectParams.relPhone"
|
||||
:maxlength="11"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div
|
||||
style="display: flex; justify-content: right"
|
||||
<TableModel
|
||||
:columnsList="columnsListInsert"
|
||||
ref="tableRef"
|
||||
@transIdList="getIdList"
|
||||
:show-btn-crews="false"
|
||||
:show-right-tools="false"
|
||||
:show-sel="false"
|
||||
:show-index="false"
|
||||
style="margin-bottom: 100px"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleAddEdge"
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
>添加边代设备</el-button
|
||||
>
|
||||
<el-button type="success" @click="onSubmit">确认</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
() => {
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
"
|
||||
>取消</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button type="danger" size="mini" @click="handleDeleteEdge(data)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot="devName" slot-scope="{ data }">
|
||||
<el-input v-model="data.devName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devCode" slot-scope="{ data }">
|
||||
<el-input v-model="data.devCode" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="unitName" slot-scope="{ data }">
|
||||
<el-input v-model="data.unitName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="areaName" slot-scope="{ data }">
|
||||
<el-input v-model="data.areaName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devUser" slot-scope="{ data }">
|
||||
<el-input v-model="data.devUser" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devUserPhone" slot-scope="{ data }">
|
||||
<el-input
|
||||
v-model="data.devUserPhone"
|
||||
:maxlength="11"
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<div style="display: flex; justify-content: right">
|
||||
<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 { columnsListInsert } from "../config-insert";
|
||||
import {
|
||||
addEdgeDeviceApi,
|
||||
editEdgeDeviceApi,
|
||||
queryEdgeDeviceByIdApi
|
||||
} from '@/api/base/insert'
|
||||
import {
|
||||
queryProjApi
|
||||
} from '@/api/base/crew'
|
||||
import {
|
||||
queryProjDeptListApi
|
||||
} from '@/api/base/projDept'
|
||||
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,
|
||||
},
|
||||
name: "FormProject",
|
||||
props: {
|
||||
editParams: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
components: { },
|
||||
created() {
|
||||
this.getRanges()
|
||||
},
|
||||
components: {},
|
||||
created() {
|
||||
this.getRanges();
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.editParams);
|
||||
if (this.editParams) {
|
||||
Object.assign(this.projectParams, this.editParams);
|
||||
// 查询所属设备
|
||||
queryEdgeDeviceByIdApi(this.editParams.id)
|
||||
.then((res) => {
|
||||
res.rows.forEach((item) => {
|
||||
this.$refs.tableRef.tableList.unshift(item);
|
||||
});
|
||||
this.$refs.tableRef.total = res.rows.length;
|
||||
})
|
||||
.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, // 联系方式
|
||||
},
|
||||
// 校验规则
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
// 各类下拉
|
||||
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();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.editParams)
|
||||
if (this.editParams) {
|
||||
Object.assign(this.projectParams, this.editParams)
|
||||
// 查询所属设备
|
||||
queryEdgeDeviceByIdApi(this.editParams.id).then(res => {
|
||||
res.rows.forEach(item => {
|
||||
this.$refs.tableRef.tableList.unshift(item)
|
||||
})
|
||||
}).catch(err => {})
|
||||
this.subSort = 2
|
||||
} else {
|
||||
this.subSort = 1
|
||||
}
|
||||
getIdList(idList) {
|
||||
this.exportList = [];
|
||||
console.log(idList);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columnsListInsert,
|
||||
exportList: [],
|
||||
subSort: '', // 提交类型：新增 1 / 修改 2
|
||||
projectParams: {
|
||||
departId: undefined, //项目部
|
||||
proId: undefined, //工程名称
|
||||
relUser: undefined, // 申请人
|
||||
relPhone: 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',
|
||||
},
|
||||
],
|
||||
},
|
||||
// 各类下拉
|
||||
departRange: [],
|
||||
projRange: [],
|
||||
// 手机正则
|
||||
phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||||
testId: 1
|
||||
}
|
||||
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(() => {});
|
||||
},
|
||||
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
|
||||
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 editEdgeDeviceApi(this.projectParams)
|
||||
if(res.code === 200) {
|
||||
this.$modal.msgSuccess('操作成功')
|
||||
this.$emit('closeDialog', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 获取各类下拉框 */
|
||||
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;
|
||||
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 editEdgeDeviceApi(this.projectParams);
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit("closeDialog", true);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-form-item__label{
|
||||
::v-deep .el-form-item__label {
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,14 @@
|
|||
@transIdList="getIdList"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button type="primary" @click="handleAddData()" icon="el-icon-plus" size="mini"
|
||||
>发起边代接入申请</el-button
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleAddData()"
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
>发起边代接入申请</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
<!-- <el-button
|
||||
@click="handleExportData(
|
||||
exportList,
|
||||
'base/tbProDepart/export',
|
||||
|
|
@ -31,28 +35,28 @@
|
|||
size="mini"
|
||||
v-if="data.auditStatus === 1 || data.auditStatus === 2"
|
||||
@click="handleAllData(data)"
|
||||
>详情</el-button
|
||||
>详情</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
v-if="data.auditStatus === 2"
|
||||
@click="handleEditData(data)"
|
||||
>编辑</el-button
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
v-if="data.auditStatus === 0"
|
||||
@click="handleExamData(data)"
|
||||
>审核</el-button
|
||||
>审核</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
v-if="data.auditStatus === 2"
|
||||
@click="handleDeleteData(data.id, deleteEdgeDeviceApi)"
|
||||
>删除</el-button
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot="relPhone" slot-scope="{ data }">
|
||||
|
|
@ -72,15 +76,12 @@
|
|||
>
|
||||
<template slot="outerContent">
|
||||
<!-- 新增以及修改数据的表单组件 -->
|
||||
<FormInsert
|
||||
:editParams="editParams"
|
||||
@closeDialog="closeDialog"
|
||||
/>
|
||||
<FormInsert :editParams="editParams" @closeDialog="closeDialog" />
|
||||
</template>
|
||||
</DialogModel>
|
||||
|
||||
<!-- 审核时的弹框 -->
|
||||
<DialogModel
|
||||
<!-- 审核时的弹框 -->
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfigApprove"
|
||||
@closeDialogOuter="closeDialogOuterApprove"
|
||||
>
|
||||
|
|
@ -93,84 +94,78 @@
|
|||
</template>
|
||||
</DialogModel>
|
||||
|
||||
<!-- 详情时的弹框 -->
|
||||
<DialogModel
|
||||
<!-- 详情时的弹框 -->
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfigAll"
|
||||
@closeDialogOuter="closeDialogOuterAll"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<!-- 详情的表单组件 -->
|
||||
<FormAll
|
||||
:editParams="editParams"
|
||||
@closeDialogAll="closeDialogAll"
|
||||
/>
|
||||
<FormAll :editParams="editParams" @closeDialogAll="closeDialogAll" />
|
||||
</template>
|
||||
</DialogModel>
|
||||
</DialogModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formLabel, columnsList, dialogConfig} from './config'
|
||||
import { dialogConfigApprove} from './config-approve'
|
||||
import { dialogConfigAll} from './config-all'
|
||||
import { commonMixin } from '../mixins/common'
|
||||
import {
|
||||
queryEdgeDeviceListApi,
|
||||
deleteEdgeDeviceApi
|
||||
} from '@/api/base/insert'
|
||||
import FormInsert from './components/form-insert.vue'
|
||||
import FormApprove from './components/form-insert-approve.vue'
|
||||
import FormAll from './components/form-insert-all.vue'
|
||||
import { formLabel, columnsList, dialogConfig } from "./config";
|
||||
import { dialogConfigApprove } from "./config-approve";
|
||||
import { dialogConfigAll } from "./config-all";
|
||||
import { commonMixin } from "../mixins/common";
|
||||
import { queryEdgeDeviceListApi, deleteEdgeDeviceApi } from "@/api/base/insert";
|
||||
import FormInsert from "./components/form-insert.vue";
|
||||
import FormApprove from "./components/form-insert-approve.vue";
|
||||
import FormAll from "./components/form-insert-all.vue";
|
||||
export default {
|
||||
name: 'ProjectDepart',
|
||||
name: "ProjectDepart",
|
||||
methods: {
|
||||
queryEdgeDeviceListApi,
|
||||
deleteEdgeDeviceApi,
|
||||
getIdList(idList) {
|
||||
this.exportList = []
|
||||
idList.forEach(item => {
|
||||
this.exportList.push(item.id)
|
||||
})
|
||||
this.exportList = [];
|
||||
idList.forEach((item) => {
|
||||
this.exportList.push(item.id);
|
||||
});
|
||||
},
|
||||
handleExamData(v) {
|
||||
this.editParams = v
|
||||
console.log(v)
|
||||
this.dialogConfigApprove.outerVisible = true
|
||||
this.dialogConfigApprove.outerTitle = '审核'
|
||||
this.editParams = v;
|
||||
console.log(v);
|
||||
this.dialogConfigApprove.outerVisible = true;
|
||||
this.dialogConfigApprove.outerTitle = "审核";
|
||||
// this.dialogConfig.dialogWidth = '50%'
|
||||
// this.dialogConfig.dialogHeight = '50%'
|
||||
// this.dialogConfig.dialogType = 'exam'
|
||||
},
|
||||
handleAllData(v) {
|
||||
console.log(v)
|
||||
this.editParams = v
|
||||
this.dialogConfigAll.outerVisible = true
|
||||
this.dialogConfigAll.outerTitle = '接入申请明细'
|
||||
console.log(v);
|
||||
this.editParams = v;
|
||||
this.dialogConfigAll.outerVisible = true;
|
||||
this.dialogConfigAll.outerTitle = "接入申请明细";
|
||||
},
|
||||
closeDialogOuterApprove() {
|
||||
this.dialogConfigApprove.outerVisible = false
|
||||
this.$refs.tableRef.getTableList()
|
||||
this.dialogConfigApprove.outerVisible = false;
|
||||
this.$refs.tableRef.getTableList();
|
||||
},
|
||||
closeDialogApprove() {
|
||||
this.dialogConfigApprove.outerVisible = false
|
||||
this.$refs.tableRef.getTableList()
|
||||
this.dialogConfigApprove.outerVisible = false;
|
||||
this.$refs.tableRef.getTableList();
|
||||
},
|
||||
closeDialogOuterAll() {
|
||||
this.dialogConfigAll.outerVisible = false
|
||||
this.$refs.tableRef.getTableList()
|
||||
this.dialogConfigAll.outerVisible = false;
|
||||
this.$refs.tableRef.getTableList();
|
||||
},
|
||||
closeDialogAll() {
|
||||
this.dialogConfigAll.outerVisible = false
|
||||
this.$refs.tableRef.getTableList()
|
||||
this.dialogConfigAll.outerVisible = false;
|
||||
this.$refs.tableRef.getTableList();
|
||||
},
|
||||
},
|
||||
mixins: [commonMixin],
|
||||
components: {
|
||||
FormInsert,FormApprove,FormAll
|
||||
},
|
||||
created() {
|
||||
|
||||
FormInsert,
|
||||
FormApprove,
|
||||
FormAll,
|
||||
},
|
||||
created() {},
|
||||
data() {
|
||||
return {
|
||||
// 搜索区表单配置项
|
||||
|
|
@ -184,10 +179,10 @@ export default {
|
|||
// 弹框区配置项
|
||||
dialogConfig,
|
||||
// 新建时弹框标题
|
||||
addDialogTitle: '接入申请',
|
||||
addDialogTitle: "接入申请",
|
||||
// 修改时弹框标题
|
||||
editDialogTitle: '修改申请',
|
||||
}
|
||||
editDialogTitle: "修改申请",
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,40 @@
|
|||
import {
|
||||
queryDeviceTypeApi
|
||||
} from '@/api/base/device'
|
||||
|
||||
export const queryDeviceTypes = () => {
|
||||
queryDeviceTypeApi({'dictType':'dev_type'}).then(res => {
|
||||
formLabel[1].f_selList = res.data.map(item => {
|
||||
import { queryDeviceTypeApi } from "@/api/base/device";
|
||||
|
||||
export const queryDeviceTypes = () => {
|
||||
queryDeviceTypeApi({ dictType: "dev_type" })
|
||||
.then((res) => {
|
||||
formLabel[1].f_selList = res.data.map((item) => {
|
||||
return {
|
||||
label: item.dictLabel,
|
||||
value: item.dictCode
|
||||
}
|
||||
})
|
||||
}).catch(err => {})
|
||||
}
|
||||
value: item.dictCode,
|
||||
};
|
||||
});
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
export const formLabel = [
|
||||
{ f_label: '设备名称', f_model: 'devName', f_type: 'ipt' },
|
||||
{ f_label: '设备类型', f_model: 'devType', f_type: 'sel',f_selList: [] },
|
||||
{ f_label: '预警日期', f_model: 'time', f_type: 'dateRange' , dateType:['startTime','endTime']},
|
||||
]
|
||||
{ f_label: "设备名称", f_model: "devName", f_type: "ipt" },
|
||||
{ f_label: "设备类型", f_model: "devType", f_type: "sel", f_selList: [] },
|
||||
{
|
||||
f_label: "预警日期",
|
||||
f_model: "time",
|
||||
f_type: "dateRange",
|
||||
dateType: ["startTime", "endTime"],
|
||||
},
|
||||
];
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'devTypeName', t_label: '预警设备类型' },
|
||||
{ t_props: 'devName', t_label: '预警设备名称', },
|
||||
{ t_props: 'devCode', t_label: '预警设备编号', },
|
||||
{ t_props: 'warnName', t_label: '预警内容', t_slot: 'warnName' },
|
||||
{ t_props: 'jcTime', t_label: '预警时间', },
|
||||
{ t_props: 'status', t_label: '状态', },
|
||||
{ t_props: 'remarks', t_label: '预警处置',t_slot: 'remarks'},
|
||||
]
|
||||
{ t_props: "devTypeName", t_label: "预警设备类型" },
|
||||
{ t_props: "devName", t_label: "预警设备名称" },
|
||||
{ t_props: "devCode", t_label: "预警设备编号" },
|
||||
{ t_props: "warnName", t_label: "预警内容", t_slot: "warnName" },
|
||||
{ t_props: "jcTime", t_label: "预警时间" },
|
||||
{ t_props: "status", t_label: "状态" },
|
||||
{ t_props: "remarks", t_label: "预警处置", t_slot: "remarks" },
|
||||
];
|
||||
|
||||
export const dialogConfig = {
|
||||
outerWidth: '40%',
|
||||
outerTitle: '',
|
||||
outerVisible: false,
|
||||
outerWidth: "40%",
|
||||
outerTitle: "",
|
||||
outerVisible: false,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,77 +8,72 @@
|
|||
:request-api="queryWarnAlertListApi"
|
||||
ref="tableRef"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button
|
||||
@click="handleExportData(
|
||||
exportList,
|
||||
'base/tbDevAttribute/export',
|
||||
'异常记录',
|
||||
queryParams
|
||||
)"
|
||||
@click="
|
||||
handleExportData(
|
||||
exportList,
|
||||
'base/tbDevAttribute/export',
|
||||
'异常记录',
|
||||
queryParams
|
||||
)
|
||||
"
|
||||
icon="el-icon-upload2"
|
||||
size="mini"
|
||||
>导出数据</el-button
|
||||
>导出数据</el-button
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
<template slot="handle" slot-scope="{ data }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
v-if="data.status === '未处置'"
|
||||
@click="handleWarnData(data)"
|
||||
>处理</el-button
|
||||
>处理</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot="warnName" slot-scope="{ data }">
|
||||
<span
|
||||
v-if="data.warnName == null || data.warnName === ''"
|
||||
>无</span
|
||||
>
|
||||
<span v-if="data.warnName == null || data.warnName === ''">无</span>
|
||||
<span v-else>{{ data.warnName }}</span>
|
||||
</template>
|
||||
|
||||
<template slot="remarks" slot-scope="{ data }">
|
||||
<span
|
||||
v-if="data.remarks == null || data.remarks === ''"
|
||||
></span
|
||||
>
|
||||
<span v-if="data.remarks == null || data.remarks === ''"></span>
|
||||
<span v-else>{{ data.remarks }}</span>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
||||
<!-- 处理时的弹框 -->
|
||||
<DialogModel
|
||||
<!-- 处理时的弹框 -->
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfig"
|
||||
@closeDialogOuter="closeDialogOuter"
|
||||
>
|
||||
<template slot="outerContent">
|
||||
<!-- 新增以及修改数据的表单组件 -->
|
||||
<FormWarnAlert
|
||||
:editParams="editParams"
|
||||
@closeDialog="closeDialog"
|
||||
/>
|
||||
<FormWarnAlert :editParams="editParams" @closeDialog="closeDialog" />
|
||||
</template>
|
||||
</DialogModel>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formLabel, columnsList,dialogConfig,queryDeviceTypes } from './config'
|
||||
import { commonMixin } from '../mixins/common'
|
||||
import {
|
||||
queryWarnAlertListApi
|
||||
} from '@/api/base/warnAlert'
|
||||
import FormWarnAlert from './components/form-warnAlert.vue'
|
||||
formLabel,
|
||||
columnsList,
|
||||
dialogConfig,
|
||||
queryDeviceTypes,
|
||||
} from "./config";
|
||||
import { commonMixin } from "../mixins/common";
|
||||
import { queryWarnAlertListApi } from "@/api/base/warnAlert";
|
||||
import FormWarnAlert from "./components/form-warnAlert.vue";
|
||||
export default {
|
||||
name: 'WarnAlert',
|
||||
name: "WarnAlert",
|
||||
methods: {
|
||||
queryWarnAlertListApi,
|
||||
handleWarnData(v) {
|
||||
this.editParams = v
|
||||
this.dialogConfig.outerVisible = true
|
||||
this.dialogConfig.outerTitle = '处理异常记录'
|
||||
this.editParams = v;
|
||||
this.dialogConfig.outerVisible = true;
|
||||
this.dialogConfig.outerTitle = "处理异常记录";
|
||||
// this.dialogConfig.dialogWidth = '50%'
|
||||
// this.dialogConfig.dialogHeight = '50%'
|
||||
// this.dialogConfig.dialogType = 'exam'
|
||||
|
|
@ -87,10 +82,10 @@ export default {
|
|||
|
||||
mixins: [commonMixin],
|
||||
components: {
|
||||
FormWarnAlert
|
||||
FormWarnAlert,
|
||||
},
|
||||
created() {
|
||||
queryDeviceTypes()
|
||||
queryDeviceTypes();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -102,7 +97,7 @@ export default {
|
|||
// 列表区配置项
|
||||
columnsList,
|
||||
// 弹框区配置项
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
157
vue.config.js
157
vue.config.js
|
|
@ -1,15 +1,15 @@
|
|||
'use strict'
|
||||
const path = require('path')
|
||||
"use strict";
|
||||
const path = require("path");
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir)
|
||||
return path.join(__dirname, dir);
|
||||
}
|
||||
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
const CompressionPlugin = require("compression-webpack-plugin");
|
||||
|
||||
const name = process.env.VUE_APP_TITLE || '博诺思管理系统' // 网页标题
|
||||
const name = process.env.VUE_APP_TITLE || "博诺思管理系统"; // 网页标题
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
const port = process.env.port || process.env.npm_config_port || 80; // 端口
|
||||
|
||||
// vue.config.js 配置说明
|
||||
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
|
||||
|
|
@ -20,119 +20,118 @@ module.exports = {
|
|||
// 例如 https://www.bonus.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.bonus.vip/admin/，则设置 baseUrl 为 /admin/。
|
||||
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
|
||||
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
|
||||
outputDir: 'dist',
|
||||
outputDir: "dist",
|
||||
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
|
||||
assetsDir: 'static',
|
||||
assetsDir: "static",
|
||||
// 是否开启eslint保存检测，有效值：ture | false | 'error'
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
lintOnSave: process.env.NODE_ENV === "development",
|
||||
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
productionSourceMap: false,
|
||||
// webpack-dev-server 相关配置
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
host: "0.0.0.0",
|
||||
port: port,
|
||||
open: true,
|
||||
proxy: {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://localhost:18080`,
|
||||
target: `http://192.168.2.12:18080`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
["^" + process.env.VUE_APP_BASE_API]: "",
|
||||
},
|
||||
},
|
||||
"/api" : {
|
||||
"target" : "http://192.168.0.21:17861",
|
||||
"/api": {
|
||||
target: "192.168.2.12:18080",
|
||||
//设置允许跨域——此处我经过测试发现可有可无
|
||||
"changeOrigin" : true,
|
||||
"pathRewrite" : {
|
||||
"^/api" : ""
|
||||
}
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/api": "",
|
||||
},
|
||||
},
|
||||
},
|
||||
disableHostCheck: true
|
||||
disableHostCheck: true,
|
||||
},
|
||||
css: {
|
||||
loaderOptions: {
|
||||
sass: {
|
||||
sassOptions: { outputStyle: "expanded" }
|
||||
}
|
||||
}
|
||||
sassOptions: { outputStyle: "expanded" },
|
||||
},
|
||||
},
|
||||
},
|
||||
configureWebpack: {
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src')
|
||||
}
|
||||
"@": resolve("src"),
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
// http://doc.bonus.vip/bonus-vue/other/faq.html#使用gzip解压缩静态文件
|
||||
new CompressionPlugin({
|
||||
cache: false, // 不启用文件缓存
|
||||
test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
|
||||
filename: '[path][base].gz[query]', // 压缩后的文件名
|
||||
algorithm: 'gzip', // 使用gzip压缩
|
||||
minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩
|
||||
deleteOriginalAssets: false // 压缩后删除原文件
|
||||
})
|
||||
cache: false, // 不启用文件缓存
|
||||
test: /\.(js|css|html|jpe?g|png|gif|svg)?$/i, // 压缩文件格式
|
||||
filename: "[path][base].gz[query]", // 压缩后的文件名
|
||||
algorithm: "gzip", // 使用gzip压缩
|
||||
minRatio: 0.8, // 压缩比例，小于 80% 的文件不会被压缩
|
||||
deleteOriginalAssets: false, // 压缩后删除原文件
|
||||
}),
|
||||
],
|
||||
},
|
||||
chainWebpack(config) {
|
||||
config.plugins.delete('preload') // TODO: need test
|
||||
config.plugins.delete('prefetch') // TODO: need test
|
||||
config.plugins.delete("preload"); // TODO: need test
|
||||
config.plugins.delete("prefetch"); // TODO: need test
|
||||
|
||||
// set svg-sprite-loader
|
||||
config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
|
||||
config.module
|
||||
.rule('svg')
|
||||
.exclude.add(resolve('src/assets/icons'))
|
||||
.end()
|
||||
config.module
|
||||
.rule('icons')
|
||||
.rule("icons")
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve('src/assets/icons'))
|
||||
.include.add(resolve("src/assets/icons"))
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.use("svg-sprite-loader")
|
||||
.loader("svg-sprite-loader")
|
||||
.options({
|
||||
symbolId: 'icon-[name]'
|
||||
symbolId: "icon-[name]",
|
||||
})
|
||||
.end()
|
||||
.end();
|
||||
|
||||
config.when(process.env.NODE_ENV !== 'development', config => {
|
||||
config
|
||||
.plugin('ScriptExtHtmlWebpackPlugin')
|
||||
.after('html')
|
||||
.use('script-ext-html-webpack-plugin', [{
|
||||
config.when(process.env.NODE_ENV !== "development", (config) => {
|
||||
config
|
||||
.plugin("ScriptExtHtmlWebpackPlugin")
|
||||
.after("html")
|
||||
.use("script-ext-html-webpack-plugin", [
|
||||
{
|
||||
// `runtime` must same as runtimeChunk name. default is `runtime`
|
||||
inline: /runtime\..*\.js$/
|
||||
}])
|
||||
.end()
|
||||
inline: /runtime\..*\.js$/,
|
||||
},
|
||||
])
|
||||
.end();
|
||||
|
||||
config.optimization.splitChunks({
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
libs: {
|
||||
name: 'chunk-libs',
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
chunks: 'initial' // only package third parties that are initially dependent
|
||||
},
|
||||
elementUI: {
|
||||
name: 'chunk-elementUI', // split elementUI into a single package
|
||||
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
|
||||
priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
||||
},
|
||||
commons: {
|
||||
name: 'chunk-commons',
|
||||
test: resolve('src/components'), // can customize your rules
|
||||
minChunks: 3, // minimum common number
|
||||
priority: 5,
|
||||
reuseExistingChunk: true
|
||||
}
|
||||
}
|
||||
})
|
||||
config.optimization.runtimeChunk('single')
|
||||
})
|
||||
}
|
||||
}
|
||||
config.optimization.splitChunks({
|
||||
chunks: "all",
|
||||
cacheGroups: {
|
||||
libs: {
|
||||
name: "chunk-libs",
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
chunks: "initial", // only package third parties that are initially dependent
|
||||
},
|
||||
elementUI: {
|
||||
name: "chunk-elementUI", // split elementUI into a single package
|
||||
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
|
||||
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
||||
},
|
||||
commons: {
|
||||
name: "chunk-commons",
|
||||
test: resolve("src/components"), // can customize your rules
|
||||
minChunks: 3, // minimum common number
|
||||
priority: 5,
|
||||
reuseExistingChunk: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
config.optimization.runtimeChunk("single");
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue