283 lines
9.0 KiB
Vue
283 lines
9.0 KiB
Vue
<template>
|
||
<el-drawer
|
||
:title="titleMap[mode]"
|
||
v-model="visible"
|
||
:size="1000"
|
||
destroy-on-close
|
||
@closed="$emit('closed')"
|
||
>
|
||
<el-container v-loading="loading">
|
||
<el-main style="padding: 0 20px 20px 20px">
|
||
<el-form
|
||
ref="dialogForm"
|
||
:model="form"
|
||
:rules="rules"
|
||
:disabled="mode == 'show'"
|
||
label-width="100px"
|
||
>
|
||
<el-row>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="作业简介" prop="name">
|
||
<el-input v-model="form.name" type="text" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="12" :sm="12" :xs="24">
|
||
<el-form-item label="开始时间" prop="start_time">
|
||
<el-date-picker
|
||
v-model="form.start_time"
|
||
type="datetime"
|
||
placeholder="选择开始时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :md="12" :sm="12" :xs="24">
|
||
<el-form-item label="结束时间" prop="end_time">
|
||
<el-date-picker
|
||
v-model="form.end_time"
|
||
type="datetime"
|
||
placeholder="选择结束时间"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :md="12" :sm="12" :xs="24">
|
||
<el-form-item label="生产状态" prop="state_work">
|
||
<el-select v-model="form.state_work" placeholder="选择生产状态">
|
||
<el-option
|
||
v-for="item in stateoptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.name"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="12" :sm="24" :xs="24">
|
||
<el-form-item label="作业区域" prop="area">
|
||
<el-select v-model="form.area" placeholder="选择作业区域" @change="areaChange" clearable>
|
||
<el-option
|
||
v-for="item in areaoptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="24" :sm="12" :xs="24">
|
||
<el-form-item label="具体地点" prop="place">
|
||
<el-input v-model="form.place" type="text" clearable></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :md="12" :sm="24" :xs="24">
|
||
<el-form-item label="业务部门" prop="dept_bus">
|
||
<el-cascader
|
||
placeholder="选择业务部门"
|
||
getCheckedNodes="true"
|
||
:props="{
|
||
expandTrigger: 'hover', // 次级菜单的展开方式
|
||
label: 'label', //
|
||
value: 'value', //
|
||
emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
|
||
checkStrictly: true
|
||
}"
|
||
v-model="form.dept_bus"
|
||
:options="deptoptions"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :md="12" :sm="24" :xs="24">
|
||
<el-form-item label="部门协调员" prop="coordinator">
|
||
<el-input
|
||
v-model="form.coordinator_name"
|
||
disabled
|
||
style="width:200px"
|
||
></el-input>
|
||
<ehsUserSelect :multiple="false" @submit="getUser"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="12" :sm="24" :xs="24">
|
||
<el-form-item label="属地部门" prop="dept_ter">
|
||
<el-cascader
|
||
placeholder="选择属地部门"
|
||
getCheckedNodes="true"
|
||
v-model="form.dept_ter"
|
||
:options="deptoptions"
|
||
:props="{
|
||
expandTrigger: 'hover', // 次级菜单的展开方式
|
||
label: 'label', //
|
||
value: 'value', //
|
||
emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
|
||
checkStrictly: true
|
||
}"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :md="12" :sm="24" :xs="24">
|
||
<el-form-item label="监控摄像头" prop="vchannels">
|
||
<el-select
|
||
v-model="form.vchannels"
|
||
:multiple = "true"
|
||
filterable
|
||
>
|
||
<el-option
|
||
v-for="item in vchannelOptions"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-main>
|
||
<el-footer>
|
||
<el-button type="primary" :loading="isSaveing" @click="submit"
|
||
>保存</el-button
|
||
>
|
||
<el-button @click="visible = false">取消</el-button>
|
||
</el-footer>
|
||
</el-container>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
import { genTree } from "@/utils/verificate";
|
||
export default {
|
||
emits: ["success", "closed"],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
mode: "add",
|
||
titleMap: {
|
||
add: "新增",
|
||
edit: "编辑",
|
||
show: "查看",
|
||
},
|
||
form: {},
|
||
rules: {
|
||
name: [{ required: true, message: "请输入作业简介" }],
|
||
start_time: [{ required: true, message: "请输入" }],
|
||
end_time: [{ required: true, message: "请输入" }],
|
||
state_work: [{ required: true, message: "请输入" }],
|
||
area: [{ required: true, message: "请输入" }],
|
||
dept_ter: [{ required: true, message: "请输入" }],
|
||
dept_bus: [{ required: true, message: "请输入" }],
|
||
coordinator: [{ required: true, message: "请输入" }],
|
||
},
|
||
visible: false,
|
||
isSaveing: false,
|
||
selectionFilters: [],
|
||
setFiltersVisible: false,
|
||
stateoptions: [
|
||
{ id: 10, name: "运行" },
|
||
{ id: 20, name: "停机" },
|
||
{ id: 30, name: "检修" },
|
||
],
|
||
deptoptions: [],
|
||
areaoptions: [],
|
||
coordinatoroptions:[],
|
||
vchannelOptions: []
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getDept();
|
||
this.getArea();
|
||
this.getVchannels();
|
||
},
|
||
methods: {
|
||
//所属部门,属地部门，业务部门
|
||
getDept() {
|
||
this.$API.system.dept.list.req({ page: 0 , type__in: 'dept'}).then((res) => {
|
||
this.deptoptions = genTree(res);
|
||
});
|
||
},
|
||
|
||
//作业区域
|
||
getArea() {
|
||
this.$API.am.area.list.req({ page: 0 }).then((res) => {
|
||
|
||
this.areaoptions = res;
|
||
});
|
||
},
|
||
areaChange(val) {
|
||
this.form.area = val
|
||
this.getVchannels()
|
||
},
|
||
// dept1Change(val) {
|
||
// // 业务部门变化
|
||
// this.$API.system.user.list.req({ page: 0, belong_dept: val }).then((res) => {
|
||
|
||
// this.coordinatoroptions = res;
|
||
// });
|
||
// },
|
||
getVchannels(){
|
||
this.$API.third.tdevice.list.req({ type: 60, page: 0, area: this.form.area }).then((res) => {
|
||
this.vchannelOptions = res;
|
||
});
|
||
},
|
||
getUser(data) {
|
||
// 子组件调用父组件的方法并传参
|
||
this.form.coordinator=data.id;
|
||
this.form.coordinator_name=data.name
|
||
},
|
||
//显示
|
||
open(mode = "add") {
|
||
this.mode = mode;
|
||
this.visible = true;
|
||
return this;
|
||
},
|
||
//表单提交方法
|
||
submit() {
|
||
this.$refs.dialogForm.validate(async (valid) => {
|
||
if (valid) {
|
||
this.isSaveing = true;
|
||
try {
|
||
var res;
|
||
if (this.mode == "add") {
|
||
res = await this.$API.opm.operation.create.req(this.form);
|
||
this.form.id = res.id;
|
||
} else if (this.mode == "edit") {
|
||
res = await this.$API.opm.operation.update.req(
|
||
this.form.id,
|
||
this.form
|
||
);
|
||
}
|
||
this.isSaveing = false;
|
||
this.$emit("success", this.form, this.mode);
|
||
this.visible = false;
|
||
this.$message.success("操作成功");
|
||
return res;
|
||
} catch (err) {
|
||
//可以处理校验错误
|
||
this.isSaveing = false;
|
||
return err;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//表单注入数据
|
||
setData(data) {
|
||
Object.assign(this.form, data);
|
||
},
|
||
//设置过滤项
|
||
setFilters(filters) {
|
||
this.selectionFilters = filters;
|
||
this.setFiltersVisible = true;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-transfer {
|
||
--el-transfer-panel-width: 345px !important;
|
||
}
|
||
</style>
|