factory_web/src/views/ungrouped/mpoint.vue

297 lines
8.2 KiB
Vue

<template>
<el-container>
<el-header>
<div class="left-panel">
<el-button type="primary" icon="el-icon-plus" @click="roleAdd" v-auth="'role.create'"></el-button>
</div>
<div class="right-panel">
<div class="right-panel-search">
<el-input v-model="query.search" placeholder="测点集名称" clearable @keyup.enter="handleQuery"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
</div>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
<el-table-column label="#" type="index" width="50"></el-table-column>
<el-table-column label="名称" prop="name" min-width="100"></el-table-column>
<el-table-column label="计量物料" prop="material_name" min-width="150"></el-table-column>
<el-table-column label="所属部门" prop="belong_dept_name" min-width="150"></el-table-column>
<el-table-column label="所属工段" prop="mgroup_name" min-width="150"></el-table-column>
<el-table-column label="创建时间" prop="create_time" min-width="150"></el-table-column>
<el-table-column label="操作" fixed="right" align="center" width="140">
<template #default="scope">
<el-button link size="small" @click="roleEdit(scope.row)" v-auth="'team.update'" type="primary">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-popconfirm title="确定删除吗?" @confirm="roleDel(scope.row, scope.$index)">
<template #reference>
<el-button link size="small" v-auth="'role.delete'" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>
<el-dialog :title="titleMap[type]" v-model="limitedVisible">
<el-form :model="form" :rules="rules" ref="addForm" label-width="80px" style="padding: 0 10px;">
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="测点编号" prop="code">
<el-input v-model="form.code" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="单位" prop="unit">
<el-input v-model="form.unit" clearable></el-input>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="检测设备">
<el-select
v-model="form.ep_monitored"
placeholder="检测设备"
clearable
style="width: 100%;"
>
<el-option
v-for="item in monitoredOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="所属设备">
<el-select
v-model="form.ep_belong"
placeholder="所属设备"
clearable
style="width: 100%;"
>
<el-option
v-for="item in epOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="所在集合">
<el-select
v-model="form.mgroup"
placeholder="所在集合"
clearable
style="width: 100%;"
>
<el-option
v-for="item in mgroupOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="计量物料">
<el-select
v-model="form.material"
placeholder="计量物料"
clearable
style="width: 100%;"
>
<el-option
v-for="item in materials"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="limitedVisible=false" >取 消</el-button>
<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()"> </el-button>
</template>
</el-dialog>
</template>
<script>
import {genTree} from "@/utils/verificate";
const defaultForm = {
id:"",
name: "",
cate:'',
product:'',
belong_dept:'',
};
export default {
name: 'dept',
data() {
return {
apiObj: this.$API.enm.mpoint.list,
search: {
keyword: null
},
query: {},
isSaving: false,
limitedVisible : false,
checkStrictly:true,
type: "add",
titleMap: {
add: '新增测点集',
edit: '编辑测点集',
show: '查看测点集'
},
//表单数据
form: defaultForm,
//验证规则
rules: {
name: [{required: true, message: '请输入测点集名称'}],
code: [{required: true, message: '请输入测点集编号'}],
unit: [{required: true, message: '请输入测点集单位'}],
},
groupsProps: {
multiple: false,
emitPath: false,
checkStrictly: true,
},
options:[
{label:'动力电',value:'elec'},
{label:'工业水',value:'water'},
{label:'煤粉',value:'water'},
{label:'蒸汽',value:'water'},
{label:'柴油',value:'water'},
{label:'压缩空气',value:'water'},
],
cates_:{
'elec':'动力电',
'water':'工业水',
},
group: [],
mgroupOptions:[],
epOptions:[],
materials:[],
monitoredOptions:[],
}
},
mounted() {
this.getMaterial();
this.getGroup();//获取部门
this.getEquipment();//获取设备
this.getMonitored();//获取检测设备
this.getMgroup();//获取集合
},
methods: {
handleChange(value) {
console.log(value);
console.log(this.form.belong_dept);
},
//加载树数据
async getGroup() {
let res = await this.$API.system.dept.list.req({ page: 0 });
this.group = genTree(res);
},
//获取设备列表
getEquipment(){
this.$API.em.equipment.list.req({page:0,type:10}).then(res=>{
this.epOptions = res;
})
},
//获取监测设备列表
getMonitored(){
this.$API.em.equipment.list.req({page:0,type:20}).then(res=>{
this.monitoredOptions = res;
})
},
//获取集合列表
getMgroup(){
this.$API.mtm.mgroup.list.req({page:0}).then(res=>{
this.mgroupOptions = res;
})
},
//获取产品列表
getMaterial(){
this.$API.mtm.material.list.req({page:0}).then(res=>{
this.materials = res;
})
},
//添加测点集
roleAdd(){
this.limitedVisible = true;
this.type = "add";
this.form = Object.assign({}, defaultForm);
},
submitHandle(){
let that = this;
this.$refs.addForm.validate( (valid) => {
if (valid) {
this.isSaveing = true;
let res;
if(this.type==='add'){
res = this.$API.enm.mpoint.create.req(that.form);
}else{
res = this.$API.enm.mpoint.update.req(that.form.id,that.form);
}
if(res.err_msg){
this.$message.error(res.err_msg);
}else{
this.isSaveing = false;
this.limitedVisible = false;
this.$refs.table.refresh();
}
}
})
},
//编辑测点集
roleEdit(row){
this.type='edit';
this.form=row;
this.limitedVisible = true;
},
//删除测点集
async roleDel(row){
var id = row.id;
var res = await this.$API.mtm.team.delete.req(id);
if(res.err_msg){
this.$message.error(res.err_msg)
}else{
this.$refs.table.refresh();
this.$message.success("删除成功")
}
},
//表格选择后回调事件
selectionChange(selection){
this.selection = selection;
},
//搜索
handleQuery(){
this.$refs.table.queryData(this.query)
},
//本地更新数据
handleSaveSuccess(){
this.$refs.table.refresh()
}
}
}
</script>
<style scoped>
.treeMain {width: 100%;height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>