fix:设备分类增删改

This commit is contained in:
shijing 2024-05-06 16:27:52 +08:00
parent 56b2d8de89
commit 44f3e3fc68
2 changed files with 342 additions and 121 deletions

View File

@ -1,126 +1,180 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<div class="left-panel"> <div class="left-panel">
<el-button type="primary" icon="el-icon-plus" v-auth="'ecate.create'" @click="add"></el-button> <el-button
</div> type="primary"
</el-header> icon="el-icon-plus"
<el-main class="nopadding"> v-auth="'ecate.create'"
<scTable ref="table" :apiObj="apiObj" row-key="id" stripe :query="query"> @click="add"
<el-table-column type="index" width="50" /> ></el-button>
<el-table-column label="名称" prop="name" show-overflow-tooltip> </div>
</el-table-column> </el-header>
<el-table-column label="编码" prop="code" show-overflow-tooltip></el-table-column> <el-main class="nopadding">
<el-table-column label="类型" show-overflow-tooltip> <scTable
<template #default="scope"> ref="table"
<span>{{ typeOptions_[scope.row.type] }}</span> :apiObj="apiObj"
</template> row-key="id"
</el-table-column> stripe
<el-table-column label="是否用于安全" show-overflow-tooltip> :query="query"
<template #default="scope"> >
<el-icon v-if="scope.row.is_for_safe" color="green"> <el-table-column type="index" width="50" />
<CircleCheckFilled /> <el-table-column label="名称" prop="name" show-overflow-tooltip>
</el-icon> </el-table-column>
</template> <el-table-column
</el-table-column> label="编码"
<el-table-column label="是否用于环保" show-overflow-tooltip> prop="code"
<template #default="scope"> show-overflow-tooltip
<el-icon v-if="scope.row.is_for_enp" color="green"> ></el-table-column>
<CircleCheckFilled /> <el-table-column label="类型" show-overflow-tooltip>
</el-icon> <template #default="scope">
</template> <span>{{ typeOptions_[scope.row.type] }}</span>
</el-table-column> </template>
<el-table-column label="是否为车辆" show-overflow-tooltip> </el-table-column>
<template #default="scope"> <el-table-column label="是否用于安全" show-overflow-tooltip>
<el-icon v-if="scope.row.is_car" color="green"> <template #default="scope">
<CircleCheckFilled /> <el-icon v-if="scope.row.is_for_safe" color="green">
</el-icon> <CircleCheckFilled />
</template> </el-icon>
</el-table-column> </template>
</scTable> </el-table-column>
</el-main> <el-table-column label="是否用于环保" show-overflow-tooltip>
</el-container> <template #default="scope">
<el-icon v-if="scope.row.is_for_enp" color="green">
<CircleCheckFilled />
</el-icon>
</template>
</el-table-column>
<el-table-column label="是否为车辆" show-overflow-tooltip>
<template #default="scope">
<el-icon v-if="scope.row.is_car" color="green">
<CircleCheckFilled />
</el-icon>
</template>
</el-table-column>
<el-table-column
label="操作"
fixed="right"
align="left"
width="100"
>
<template #default="scope">
<el-button
link
type="primary"
@click="table_edit(scope.row)"
v-auth="'equipment.update'"
>
编辑
</el-button>
<el-popconfirm
title="确定删除吗?"
@confirm="table_del(scope.row)"
v-auth="'equipment.delete'"
>
<template #reference>
<el-button link type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</scTable>
</el-main>
<save-dialog
v-if="dialog.save"
ref="saveDialog"
@success="handleSaveSuccess"
@closed="dialog.save = false"
></save-dialog>
</el-container>
</template> </template>
<script> <script>
import saveDialog from "./ecate_form.vue";
export default { export default {
data() { name: "设备类型",
return { components: {
apiObj: this.$API.em.ecate.list, saveDialog,
query: {}, },
typeOptions_: { data() {
10: '生产设备', return {
20: '计量设备', apiObj: this.$API.em.ecate.list,
30: '治理设备', query: {},
40: '监测设备', typeOptions_: {
50: '监控设备', 10: "生产设备",
}, 20: "计量设备",
typeOptions: [ 30: "治理设备",
{ id: 10, name: '生产设备' }, 40: "监测设备",
{ id: 20, name: '计量设备' }, 50: "监控设备",
{ id: 30, name: '治理设备' }, },
{ id: 40, name: '监测设备' }, dialog: {
{ id: 50, name: '监控设备' } save: false,
], },
}; typeOptions: [
}, { id: 10, name: "生产设备" },
methods: { { id: 20, name: "计量设备" },
// { id: 30, name: "治理设备" },
add() { { id: 40, name: "监测设备" },
this.dialog.save = true; { id: 50, name: "监控设备" },
this.$nextTick(() => { ],
this.$refs.saveDialog.open("add", 20); };
}); },
}, methods: {
// //
table_edit(row) { add() {
this.dialog.save = true; this.dialog.save = true;
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.saveDialog.open("edit", 20).setData(row); this.$refs.saveDialog.open("add");
}); });
}, },
// //
async table_del(row) { table_edit(row) {
this.$API.em.equipment.delete this.dialog.save = true;
.req(row.id) this.$nextTick(() => {
.then((res) => { this.$refs.saveDialog.open("edit").setData(row);
this.$message.success("删除成功"); });
this.$refs.table.refresh(); },
}) //
.catch((err) => { async table_del(row) {
return err; this.$API.em.ecate.delete
}); .req(row.id)
}, .then((res) => {
// this.$message.success("删除成功");
submit() { this.$refs.table.refresh();
this.$refs.dialogForm.validate(async (valid) => { })
if (valid) { .catch((err) => {
this.isSaveing = true; return err;
this.$API.em.echeckrecord.create.req(this.form).then(res => { });
this.visible = false; },
this.isSaveing = false; //
this.$message.success("操作成功"); submit() {
this.$refs.drawer_table.refresh(); this.$refs.dialogForm.validate(async (valid) => {
this.$refs.table.refresh(); if (valid) {
}).catch(() => { this.isSaveing = true;
this.isSaveing = false; this.$API.em.echeckrecord.create
}) .req(this.form)
} .then((res) => {
}); this.visible = false;
}, this.isSaveing = false;
// this.$message.success("操作成功");
handleSaveSuccess(data, mode) { this.$refs.drawer_table.refresh();
if (mode == "add") { this.$refs.table.refresh();
this.$refs.table.refresh(); })
} else if (mode == "edit") { .catch(() => {
this.$refs.table.refresh(); this.isSaveing = false;
} });
}, }
handleQuery() { });
this.$refs.table.queryData(this.query) },
}, //
resetQuery() { handleSaveSuccess(data, mode) {
this.query = {}; this.$refs.table.refresh();
}, },
}, handleQuery() {
this.$refs.table.queryData(this.query);
},
resetQuery() {
this.query = {};
},
},
}; };
</script> </script>

167
src/views/em/ecate_form.vue Normal file
View File

@ -0,0 +1,167 @@
<template>
<el-dialog
: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="120px"
>
<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" prop="type">
<el-form-item label="类型">
<el-select
v-model="form.type"
style="width: 100%"
>
<el-option
v-for="e in eqTypeEnum.values"
:key="e.key"
:value="e.key"
:label="e.text"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="编号">
<el-input
v-model="form.code"
clearable
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="是否用于安全">
<el-switch v-model="form.is_for_safe" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="是否用于环保">
<el-switch v-model="form.is_for_enp" />
</el-form-item>
</el-col>
<el-col :md="12" :sm="24">
<el-form-item label="是否为车辆">
<el-switch v-model="form.is_car" />
</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-dialog>
</template>
<script>
import { eqTypeEnum } from "@/utils/enum.js";
export default {
emits: ["success", "closed"],
data() {
return {
eqTypeEnum,
loading: false,
mode: "add",
titleMap: {
add: "新增",
edit: "编辑",
show: "查看",
},
form: {
name: "",
code: "",
type: 10,
is_for_safe: false,
is_for_enp: false,
is_car: false,
},
rules: {
name: [{ required: true, message: "请输入类型名称" }],
type: [{ required: true, message: "请请选择设备类型" }],
},
visible: false,
isSaveing: false,
};
},
mounted() {},
methods: {
//
open(mode = "add") {
this.mode = mode;
this.visible = true;
return this;
},
//
submit() {
this.$refs.dialogForm.validate(async (valid) => {
if (valid) {
this.isSaveing = true;
if (this.mode == "add") {
this.$API.em.ecate.create
.req(this.form)
.then((res) => {
this.isSaveing = false;
this.$emit("success");
this.visible = false;
this.$message.success("操作成功");
})
.catch((res) => {
this.isSaveing = false;
});
} else if (this.mode == "edit") {
this.$API.em.ecate.update
.req(this.form.id, this.form)
.then((res) => {
this.isSaveing = false;
this.$emit("success");
this.visible = false;
this.$message.success("操作成功");
})
.catch((res) => {
this.isSaveing = false;
});
}
}
});
},
//
setData(data) {
Object.assign(this.form, data);
},
//
setFilters(filters) {
this.selectionFilters = filters;
},
},
};
</script>
<style>
.formItem {
width: 100%;
}
</style>