bug 修复
This commit is contained in:
BianLzhaoMin
parent
6a038ee455
commit
eb1c8a4cb9
|
|
@ -1,412 +1,441 @@
|
|||
<template>
|
||||
<!-- 工程管理 新增、编辑 表单组件 -->
|
||||
<div>
|
||||
<el-form
|
||||
v-loading="open"
|
||||
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"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in departRange"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<template
|
||||
v-if="item.label.length > maxlength">
|
||||
<el-tooltip
|
||||
class="item-tooltip"
|
||||
effect="dark"
|
||||
:content="item.label"
|
||||
placement="top"
|
||||
>
|
||||
<span class="ellipsis">{{ item.label }}</span>
|
||||
</el-tooltip>
|
||||
|
||||
</template>
|
||||
</el-option>
|
||||
</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 :maxlength="50" 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
|
||||
v-loading="open"
|
||||
label-width="100px"
|
||||
size="medium"
|
||||
ref="projectParamsRef"
|
||||
:model="projectParams"
|
||||
:rules="projectParamsRules"
|
||||
>
|
||||
</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 :maxlength="50" v-model="data.devName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devCode" slot-scope="{ data }">
|
||||
<el-input :maxlength="50" v-model="data.devCode" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="unitName" slot-scope="{ data }">
|
||||
<el-input :maxlength="50" v-model="data.unitName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="areaName" slot-scope="{ data }">
|
||||
<el-input :maxlength="50" v-model="data.areaName" placeholder="请输入"></el-input>
|
||||
</template>
|
||||
<template slot="devUser" slot-scope="{ data }">
|
||||
<el-input :maxlength="50" 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-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"
|
||||
:popper-append-to-body="false"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in departRange"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<template v-if="item.label.length > maxlength">
|
||||
<el-tooltip
|
||||
class="item-tooltip"
|
||||
effect="dark"
|
||||
:content="item.label"
|
||||
placement="top"
|
||||
>
|
||||
<span class="ellipsis">{{
|
||||
item.label
|
||||
}}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-option>
|
||||
</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
|
||||
:maxlength="50"
|
||||
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">
|
||||
<el-button type="success" @click="onSubmit">确认</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
() => {
|
||||
this.$emit('closeDialog');
|
||||
}
|
||||
"
|
||||
>取消</el-button
|
||||
>
|
||||
<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
|
||||
>
|
||||
</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
|
||||
:maxlength="50"
|
||||
v-model="data.devName"
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</template>
|
||||
<template slot="devCode" slot-scope="{ data }">
|
||||
<el-input
|
||||
:maxlength="50"
|
||||
v-model="data.devCode"
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</template>
|
||||
<template slot="unitName" slot-scope="{ data }">
|
||||
<el-input
|
||||
:maxlength="50"
|
||||
v-model="data.unitName"
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</template>
|
||||
<template slot="areaName" slot-scope="{ data }">
|
||||
<el-input
|
||||
:maxlength="50"
|
||||
v-model="data.areaName"
|
||||
placeholder="请输入"
|
||||
></el-input>
|
||||
</template>
|
||||
<template slot="devUser" slot-scope="{ data }">
|
||||
<el-input
|
||||
:maxlength="50"
|
||||
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>
|
||||
</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";
|
||||
addEdgeDeviceApi,
|
||||
editEdgeDeviceApi,
|
||||
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();
|
||||
},
|
||||
async mounted() {
|
||||
this.open = true
|
||||
if (this.editParams) {
|
||||
await Object.assign(this.projectParams, this.editParams);
|
||||
// 查询所属设备
|
||||
await 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;
|
||||
}
|
||||
await this.getRanges();
|
||||
this.open = false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columnsListInsert,
|
||||
open: false,
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
maxlength:20,
|
||||
// 各类下拉
|
||||
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();
|
||||
}
|
||||
components: {},
|
||||
created() {
|
||||
// this.getRanges();
|
||||
},
|
||||
getIdList(idList) {
|
||||
this.exportList = [];
|
||||
console.log(idList);
|
||||
async mounted() {
|
||||
this.open = true
|
||||
if (this.editParams) {
|
||||
await Object.assign(this.projectParams, this.editParams)
|
||||
// 查询所属设备
|
||||
await 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
|
||||
}
|
||||
await this.getRanges()
|
||||
this.open = false
|
||||
},
|
||||
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) => {
|
||||
data() {
|
||||
return {
|
||||
label: item.departName,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
// 获取工程下拉选
|
||||
if(this.subSort==1)
|
||||
{
|
||||
let projRes = await queryProjApi({
|
||||
isAll: 0,
|
||||
});
|
||||
this.projRange = projRes.data.map((item) => {
|
||||
return {
|
||||
label: item.proName,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
columnsListInsert,
|
||||
open: false,
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
maxlength: 20,
|
||||
// 各类下拉
|
||||
departRange: [],
|
||||
projRange: [],
|
||||
// 手机正则
|
||||
phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
|
||||
testId: 1,
|
||||
}
|
||||
if(this.subSort==2){
|
||||
// 获取工程下拉选
|
||||
let projRes = queryProjApi({
|
||||
isAll: 0
|
||||
}).then(projRes =>{
|
||||
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;
|
||||
this.projectParams.proId = null;
|
||||
if(this.subSort==2){
|
||||
// 获取工程下拉选
|
||||
let projRes = queryProjApi({
|
||||
isAll: 0,
|
||||
departId: e,
|
||||
}).then(projRes =>{
|
||||
this.projRange = projRes.data.map((item) => {
|
||||
return {
|
||||
label: item.proName,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
})
|
||||
}
|
||||
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(() => {
|
||||
// 这个bug 是因为没有退出 forEach 循环导致的 需要加try catch 退出循环
|
||||
try {
|
||||
this.$refs.tableRef.tableList.forEach((item, index) => {
|
||||
if (item.testId === v.testId) {
|
||||
this.$refs.tableRef.tableList.splice(index, 1)
|
||||
throw new Error()
|
||||
}
|
||||
})
|
||||
} catch (error) {}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
if(this.subSort==1){
|
||||
// 获取工程下拉选
|
||||
let projRes = queryProjApi({
|
||||
isAll: 0,
|
||||
departId: e,
|
||||
}).then(projRes =>{
|
||||
this.projRange = projRes.data.map((item) => {
|
||||
return {
|
||||
label: item.proName,
|
||||
value: item.id,
|
||||
};
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
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);
|
||||
/** 获取各类下拉框 */
|
||||
async getRanges() {
|
||||
// 获取项目部下拉选
|
||||
let deptRes = await queryProjDeptListApi({
|
||||
isAll: 0,
|
||||
})
|
||||
this.departRange = deptRes.data.map((item) => {
|
||||
return {
|
||||
label: item.departName,
|
||||
value: item.id,
|
||||
}
|
||||
})
|
||||
// 获取工程下拉选
|
||||
if (this.subSort == 1) {
|
||||
let projRes = await queryProjApi({
|
||||
isAll: 0,
|
||||
})
|
||||
this.projRange = projRes.data.map((item) => {
|
||||
return {
|
||||
label: item.proName,
|
||||
value: item.id,
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let res = await editEdgeDeviceApi(this.projectParams);
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess("操作成功");
|
||||
this.$emit("closeDialog", true);
|
||||
if (this.subSort == 2) {
|
||||
// 获取工程下拉选
|
||||
let projRes = queryProjApi({
|
||||
isAll: 0,
|
||||
}).then((projRes) => {
|
||||
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
|
||||
this.projectParams.proId = null
|
||||
if (this.subSort == 2) {
|
||||
// 获取工程下拉选
|
||||
let projRes = queryProjApi({
|
||||
isAll: 0,
|
||||
departId: e,
|
||||
}).then((projRes) => {
|
||||
this.projRange = projRes.data.map((item) => {
|
||||
return {
|
||||
label: item.proName,
|
||||
value: item.id,
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if (this.subSort == 1) {
|
||||
// 获取工程下拉选
|
||||
let projRes = queryProjApi({
|
||||
isAll: 0,
|
||||
departId: e,
|
||||
}).then((projRes) => {
|
||||
this.projRange = projRes.data.map((item) => {
|
||||
return {
|
||||
label: item.proName,
|
||||
value: item.id,
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
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>
|
||||
|
||||
.ellipsis {
|
||||
display: block; /* 确保是块级元素 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏超出的部分 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
max-width: 400px; /* 设置最大宽度，调整为你需要的值 */
|
||||
display: block; /* 确保是块级元素 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏超出的部分 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
max-width: 400px; /* 设置最大宽度，调整为你需要的值 */
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
font-weight: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
244
vue.config.js
244
vue.config.js
|
|
@ -1,137 +1,137 @@
|
|||
"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
|
||||
// 这里只列一部分，具体配置参考文档
|
||||
module.exports = {
|
||||
// 部署生产环境和开发环境下的URL。
|
||||
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
|
||||
// 例如 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",
|
||||
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
|
||||
assetsDir: "static",
|
||||
// 是否开启eslint保存检测，有效值：ture | false | 'error'
|
||||
lintOnSave: process.env.NODE_ENV === "development",
|
||||
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
productionSourceMap: false,
|
||||
// webpack-dev-server 相关配置
|
||||
devServer: {
|
||||
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://192.168.0.14:19900`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
["^" + process.env.VUE_APP_BASE_API]: "",
|
||||
// 部署生产环境和开发环境下的URL。
|
||||
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
|
||||
// 例如 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',
|
||||
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
|
||||
assetsDir: 'static',
|
||||
// 是否开启eslint保存检测，有效值：ture | false | 'error'
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
|
||||
productionSourceMap: false,
|
||||
// webpack-dev-server 相关配置
|
||||
devServer: {
|
||||
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://192.168.2.12:18080`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||
},
|
||||
},
|
||||
// "/api": {
|
||||
// target: "192.168.2.12:18080",
|
||||
// //设置允许跨域——此处我经过测试发现可有可无
|
||||
// changeOrigin: true,
|
||||
// pathRewrite: {
|
||||
// "^/api": "",
|
||||
// },
|
||||
// },
|
||||
},
|
||||
},
|
||||
"/api": {
|
||||
target: "192.168.2.12:18080",
|
||||
//设置允许跨域——此处我经过测试发现可有可无
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
"^/api": "",
|
||||
disableHostCheck: true,
|
||||
},
|
||||
css: {
|
||||
loaderOptions: {
|
||||
sass: {
|
||||
sassOptions: { outputStyle: 'expanded' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
disableHostCheck: true,
|
||||
},
|
||||
css: {
|
||||
loaderOptions: {
|
||||
sass: {
|
||||
sassOptions: { outputStyle: "expanded" },
|
||||
},
|
||||
},
|
||||
},
|
||||
configureWebpack: {
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": 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, // 压缩后删除原文件
|
||||
}),
|
||||
],
|
||||
},
|
||||
chainWebpack(config) {
|
||||
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("icons")
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve("src/assets/icons"))
|
||||
.end()
|
||||
.use("svg-sprite-loader")
|
||||
.loader("svg-sprite-loader")
|
||||
.options({
|
||||
symbolId: "icon-[name]",
|
||||
})
|
||||
.end();
|
||||
|
||||
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();
|
||||
|
||||
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,
|
||||
},
|
||||
configureWebpack: {
|
||||
name: name,
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve('src'),
|
||||
},
|
||||
},
|
||||
});
|
||||
config.optimization.runtimeChunk("single");
|
||||
});
|
||||
},
|
||||
};
|
||||
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, // 压缩后删除原文件
|
||||
}),
|
||||
],
|
||||
},
|
||||
chainWebpack(config) {
|
||||
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('icons')
|
||||
.test(/\.svg$/)
|
||||
.include.add(resolve('src/assets/icons'))
|
||||
.end()
|
||||
.use('svg-sprite-loader')
|
||||
.loader('svg-sprite-loader')
|
||||
.options({
|
||||
symbolId: 'icon-[name]',
|
||||
})
|
||||
.end()
|
||||
|
||||
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()
|
||||
|
||||
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