update drawer and edit

This commit is contained in:
lb 2023-11-24 10:41:11 +08:00
parent d79ba71bd7
commit 54b63a7f53
7 changed files with 290 additions and 133 deletions

View File

@ -166,13 +166,17 @@ export default {
input: true,
label: '参数列名',
prop: 'plcParamName',
rules: [{ required: true, message: '参数列名不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '参数列名不能为空', trigger: 'blur' },
],
},
{
input: true,
label: '参数名称',
prop: 'name',
rules: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '参数名称不能为空', trigger: 'blur' },
],
},
],
[
@ -419,35 +423,35 @@ export default {
},
//
async submitAttrForm() {
this.$refs['attrForm'].validate((valid) => {
submitAttrForm() {
this.$refs['attrForm'].validate(async (valid) => {
if (!valid) {
return;
}
});
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: {
...this.attrForm,
connectId: this.infoData.id
},
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: {
...this.attrForm,
connectId: this.infoData.id,
},
});
}
this.attrFormSubmitting = false;
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
});
},
closeAttrForm() {

View File

@ -12,7 +12,7 @@
:wrapper-closable="false"
class="drawer"
custom-class="mes-drawer"
size="60%"
:size="size || '50%'"
@closed="$emit('destroy')">
<SmallTitle slot="title">
{{
@ -42,7 +42,8 @@
:dataForm="form"
:rows="formRows" /> -->
<el-row style="margin-bottom: 24px">
<!-- if -->
<el-row v-if="mode.includes('detail')" style="margin-bottom: 24px">
<el-col :span="8">
<div
class="title"
@ -62,13 +63,39 @@
</div>
</el-col>
</el-row>
<!-- else -->
<el-row v-else style="margin-bottom: 24px" :gutter="20">
<el-form ref="form" :model="form">
<el-col :span="8">
<el-form-item
class="title"
label="设备分组名称"
style="font-size: 16px; margin: 8px 0">
<el-input
v-model="form.name"
placeholder="请输入设备分组名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
class="title"
label="设备分组编码"
style="font-size: 16px; margin: 8px 0">
<el-input
v-model="form.code"
placeholder="请输入设备分组编码"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
<div
v-if="section.key == 'attrs'"
style="position: relative; margin-top: 12px">
<!-- v-if="!mode.includes('detail')" -->
<div style="position: absolute; top: -40px; right: 0">
<div
v-if="!mode.includes('detail')"
style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddAttr" type="text">
<i class="el-icon-plus"></i>
添加报警
@ -84,7 +111,7 @@
<!-- :add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr" -->
<method-btn
v-if="section.tableBtn"
v-if="section.tableBtn && !mode.includes('detail')"
slot="handleBtn"
label="操作"
:method-list="tableBtn"
@ -103,11 +130,13 @@
</div>
<div class="drawer-body__footer">
<el-button style="" @click="handleCancel">取消</el-button>
<!-- <el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑
</el-button> -->
<!-- <el-button v-else type="primary" @click="handleCancel">确定</el-button> -->
<el-button style="" @click="handleCancel">返回</el-button>
<el-button
type="primary"
v-if="!mode.includes('detail')"
@click="handleSave">
保存
</el-button>
</div>
</div>
@ -163,7 +192,7 @@ const SmallTitle = {
export default {
components: { SmallTitle, DialogForm, BaseInfoForm },
props: ['sections', 'defaultMode', 'dataId'], // dataId id
props: ['sections', 'defaultMode', 'dataId', 'size'], // dataId id
data() {
return {
mode: '',
@ -191,7 +220,9 @@ export default {
label: '报警编码', //
prop: 'code',
url: '/base/equipment-group-alarm/getCode',
rules: [{ required: true, message: '报警编码不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警编码不能为空', trigger: 'blur' },
],
},
{
select: true,
@ -205,13 +236,17 @@ export default {
input: true,
label: '参数列名', //
prop: 'plcParamName',
rules: [{ required: true, message: '参数列名不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '参数列名不能为空', trigger: 'blur' },
],
},
{
input: true,
label: '报警内容',
prop: 'alarmContent',
rules: [{ required: true, message: '报警内容不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警内容不能为空', trigger: 'blur' },
],
},
],
[
@ -223,7 +258,9 @@ export default {
{ label: '布尔型', value: 2 },
{ label: '字符型', value: 1 },
],
rules: [{ required: true, message: '报警类型不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警类型不能为空', trigger: 'blur' },
],
},
{
input: true,
@ -322,7 +359,7 @@ export default {
handleSave() {
this.$refs['form'][0].validate(async (valid) => {
if (valid) {
const isEdit = this.mode == 'edit';
const isEdit = !this.mode.includes('detail');
await this.$axios({
url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
method: isEdit ? 'put' : 'post',
@ -403,32 +440,32 @@ export default {
},
//
async submitAttrForm() {
this.$refs['attrForm'].validate((valid) => {
submitAttrForm() {
this.$refs['attrForm'].validate(async (valid) => {
if (!valid) {
return;
}
});
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
}
this.attrFormSubmitting = false;
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
});
},
closeAttrForm() {

View File

@ -45,6 +45,7 @@
<BasicDrawer
v-if="editVisible"
ref="drawer"
size="45%"
:default-mode="editMode"
:data-id="alarmForm.id"
:sections="[
@ -403,12 +404,25 @@ export default {
});
});
},
handleTableBtnClick({ data, type }) {
switch (type) {
case 'edit':
this.handleDetail(data, 'edit');
break;
case 'delete':
this.handleDelete(data);
break;
case 'detail':
this.handleDetail(data);
break;
}
},
//
handleDetail(row) {
handleDetail(row, mode = 'detail') {
// debugger;
const { id, code, name, createTime } = row;
//
this.editMode = 'detail';
this.editMode = mode;
this.alarmForm.id = id;
this.alarmForm.equipmentGroupCode = code;
this.alarmForm.equipmentGroupName = name;

View File

@ -12,7 +12,7 @@
:wrapper-closable="false"
class="drawer"
custom-class="mes-drawer"
size="60%"
:size="size || '50%'"
@closed="$emit('destroy')">
<SmallTitle slot="title">
{{
@ -42,7 +42,7 @@
:dataForm="form"
:rows="formRows" /> -->
<el-row style="margin-bottom: 24px">
<el-row v-if="mode.includes('detail')" style="margin-bottom: 24px">
<el-col :span="8">
<div
class="title"
@ -62,13 +62,38 @@
</div>
</el-col>
</el-row>
<el-row v-else style="margin-bottom: 24px" :gutter="20">
<el-form ref="form" :model="form">
<el-col :span="8">
<el-form-item
class="title"
label="设备分组名称"
style="font-size: 16px; margin: 8px 0">
<el-input
v-model="form.name"
placeholder="请输入设备分组名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
class="title"
label="设备分组编码"
style="font-size: 16px; margin: 8px 0">
<el-input
v-model="form.code"
placeholder="请输入设备分组编码"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
<div
v-if="section.key == 'attrs'"
style="position: relative; margin-top: 12px">
<!-- v-if="!mode.includes('detail')" -->
<div style="position: absolute; top: -40px; right: 0">
<div
v-if="!mode.includes('detail')"
style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddAttr" type="text">
<i class="el-icon-plus"></i>
添加属性
@ -84,7 +109,7 @@
<!-- :add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr" -->
<method-btn
v-if="section.tableBtn"
v-if="section.tableBtn && !mode.includes('detail')"
slot="handleBtn"
label="操作"
:method-list="tableBtn"
@ -104,10 +129,12 @@
<div class="drawer-body__footer">
<el-button style="" @click="handleCancel">取消</el-button>
<!-- <el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑
</el-button> -->
<!-- <el-button v-else type="primary" @click="handleCancel">确定</el-button> -->
<el-button
type="primary"
v-if="!mode.includes('detail')"
@click="handleSave">
保存
</el-button>
</div>
</div>
@ -163,7 +190,7 @@ const SmallTitle = {
export default {
components: { SmallTitle, DialogForm, BaseInfoForm },
props: ['sections', 'defaultMode', 'dataId'], // dataId id
props: ['sections', 'defaultMode', 'dataId', 'size'], // dataId id
data() {
return {
mode: '',
@ -191,7 +218,9 @@ export default {
label: '报警编码', //
prop: 'code',
url: '/base/equipment-group-alarm/getCode',
rules: [{ required: true, message: '报警编码不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警编码不能为空', trigger: 'blur' },
],
},
{
select: true,
@ -201,7 +230,9 @@ export default {
{ label: '布尔型', value: 2 },
{ label: '字符型', value: 1 },
],
rules: [{ required: true, message: '报警类型不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警类型不能为空', trigger: 'blur' },
],
},
],
[
@ -222,13 +253,17 @@ export default {
input: true,
label: '参数列名', //
prop: 'plcParamName',
rules: [{ required: true, message: '参数列名不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '参数列名不能为空', trigger: 'blur' },
],
},
{
input: true,
label: '报警内容',
prop: 'alarmContent',
rules: [{ required: true, message: '报警内容不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警内容不能为空', trigger: 'blur' },
],
},
],
],
@ -322,7 +357,7 @@ export default {
handleSave() {
this.$refs['form'][0].validate(async (valid) => {
if (valid) {
const isEdit = this.mode == 'edit';
const isEdit = !this.mode.includes('detail');
await this.$axios({
url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
method: isEdit ? 'put' : 'post',
@ -403,33 +438,32 @@ export default {
},
//
async submitAttrForm() {
this.$refs['attrForm'].validate((valid) => {
submitAttrForm() {
this.$refs['attrForm'].validate(async (valid) => {
if (!valid) {
return;
}
});
console.log('this.attrform', this.attrForm);
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
}
this.attrFormSubmitting = false;
if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
});
},
closeAttrForm() {

View File

@ -45,6 +45,7 @@
<BasicDrawer
v-if="editVisible"
ref="drawer"
size="45%"
:default-mode="editMode"
:data-id="alarmForm.id"
:sections="[
@ -224,7 +225,9 @@ export default {
bind: {
filterable: true,
},
rules: [{ required: true, message: '设备不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '设备不能为空', trigger: 'blur' },
],
},
],
[
@ -238,7 +241,9 @@ export default {
bind: {
filterable: true,
},
rules: [{ required: true, message: '报警分组不能为空', trigger: 'blur' }],
rules: [
{ required: true, message: '报警分组不能为空', trigger: 'blur' },
],
},
],
],
@ -269,7 +274,13 @@ export default {
input: true,
label: '设备分组名称',
prop: 'name',
rules: [{ required: true, message: '设备分组名称不能为空', trigger: 'blur' }],
rules: [
{
required: true,
message: '设备分组名称不能为空',
trigger: 'blur',
},
],
// bind: {
// disabled: this.editMode == 'detail', // some condition, like detail mode...
// }
@ -287,26 +298,23 @@ export default {
prop: 'createTime',
label: '添加时间',
fixed: true,
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ width: 240, prop: 'code', label: '报警编码' },
{ prop: 'code', label: '报警编码' },
{
width: 100,
prop: 'type',
label: '报警类型',
filter: (val) =>
val != null ? ['-', '字符型', '布尔型', '-'][val] : '-',
},
{
width: 90,
prop: 'grade',
label: '报警级别',
filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),
},
{ width: 180, prop: 'alarmCode', label: '设备报警编码' },
{ width: 128, prop: 'plcParamName', label: '参数列名' },
{ width: 128, prop: 'alarmContent', label: '报警内容' },
{ prop: 'alarmCode', label: '设备报警编码' },
{ prop: 'plcParamName', label: '参数列名' },
{ prop: 'alarmContent', label: '报警内容' },
],
};
},
@ -361,6 +369,19 @@ export default {
};
this.resetForm('form');
},
handleTableBtnClick({ data, type }) {
switch (type) {
case 'edit':
this.handleDetail(data, 'edit');
break;
case 'delete':
this.handleDelete(data);
break;
case 'detail':
this.handleDetail(data);
break;
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
@ -411,11 +432,11 @@ export default {
});
},
//
handleDetail(row) {
handleDetail(row, mode = 'detail') {
const { equipmentId, equipmentName, groupCode, groupId, groupName, id } =
row;
//
this.editMode = 'detail';
this.editMode = mode;
this.alarmForm.id = groupId;
this.alarmForm.equipmentGroupCode = groupCode;
this.alarmForm.equipmentGroupName = groupName;

View File

@ -52,6 +52,7 @@
<BasicDrawer
v-if="editVisible"
ref="drawer"
size="45%"
:default-mode="editMode"
:info-data="alarmForm"
:sections="[
@ -59,6 +60,10 @@
name: '基本信息',
key: 'base',
rows: drawerBaseInfoRows,
url: '/base/equipment-plc-connect/get',
urlUpdate: '/base/equipment-plc-connect/update',
urlCreate: '/base/equipment-plc-connect/create',
queryParams: { id: alarmForm.id },
},
{
name: '采集参数',
@ -189,7 +194,7 @@ export default {
placeholder: '请选择设备',
param: 'equipmentId',
selectOptions: [],
filterable: true
filterable: true,
},
{
type: 'select',
@ -197,7 +202,7 @@ export default {
placeholder: '请选择关联表编码',
param: 'plcId',
selectOptions: [],
filterable: true
filterable: true,
},
{
type: 'button',
@ -311,8 +316,8 @@ export default {
label: '生产参数类型',
filter: (val) =>
val != null
// ? ['', '', '', '', '', ''][val]
? ['', '进口计数', '出口计数', '损耗计数', '无类型', ''][val]
? // ? ['', '', '', '', '', ''][val]
['', '进口计数', '出口计数', '损耗计数', '无类型', ''][val]
: '-',
},
{
@ -423,6 +428,19 @@ export default {
};
this.resetForm('form');
},
handleTableBtnClick({ data, type }) {
switch (type) {
case 'edit':
this.handleDetail(data, 'edit');
break;
case 'delete':
this.handleDelete(data);
break;
case 'detail':
this.handleDetail(data);
break;
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
@ -474,7 +492,7 @@ export default {
},
//
handleDetail(row) {
handleDetail(row, mode = 'detail') {
// debugger;
const {
id,
@ -490,7 +508,7 @@ export default {
workshopSection,
} = row;
//
this.editMode = 'detail';
this.editMode = mode;
this.alarmForm.id = id;
this.alarmForm.plcTableName = plcTableName; //
this.alarmForm.equipmentName = equipmentName;

View File

@ -12,7 +12,7 @@
:wrapper-closable="false"
class="drawer"
custom-class="mes-drawer"
size="60%"
:size="size || '50%'"
@closed="$emit('destroy')">
<SmallTitle slot="title">
{{
@ -42,7 +42,8 @@
v-model="form"
:rows="formRows" /> -->
<el-row style="margin-bottom: 24px">
<!-- if -->
<el-row v-if="mode.includes('detail')" style="margin-bottom: 24px">
<el-col :span="8">
<div
class="title"
@ -64,13 +65,39 @@
</div>
</el-col>
</el-row>
<!-- else -->
<el-row v-else style="margin-bottom: 24px" :gutter="20">
<el-form ref="form" :model="form">
<el-col :span="8">
<el-form-item
class="title"
label="设备名"
style="font-size: 16px; margin: 8px 0">
<el-input
v-model="form.equipmentName"
placeholder="请输入设备名"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
class="title"
label="设备关联表名"
style="font-size: 16px; margin: 8px 0">
<el-input
v-model="form.plcTableName"
placeholder="请输入关联表名"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
<div
v-if="section.key == 'attrs'"
style="position: relative; margin-top: 12px">
<!-- v-if="!mode.includes('detail')" -->
<div style="position: absolute; top: -40px; right: 0">
<div
v-if="!mode.includes('detail')"
style="position: absolute; top: -40px; right: 0">
<el-button @click="handleAddAttr" type="text">
<i class="el-icon-plus"></i>
添加属性
@ -86,7 +113,7 @@
<!-- :add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr" -->
<method-btn
v-if="section.tableBtn"
v-if="section.tableBtn && !mode.includes('detail')"
slot="handleBtn"
label="操作"
:method-list="tableBtn"
@ -106,10 +133,12 @@
<div class="drawer-body__footer">
<el-button style="" @click="handleCancel">取消</el-button>
<!-- <el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑
</el-button> -->
<!-- <el-button v-else type="primary" @click="handleCancel">确定</el-button> -->
<el-button
type="primary"
v-if="!mode.includes('detail')"
@click="handleSave">
保存
</el-button>
</div>
</div>
@ -164,7 +193,7 @@ const SmallTitle = {
export default {
components: { SmallTitle, DialogForm: BaseInfoForm, BaseInfoForm },
props: ['sections', 'defaultMode', 'infoData'],
props: ['sections', 'defaultMode', 'infoData', 'size'],
data() {
return {
mode: '',
@ -412,7 +441,7 @@ export default {
handleSave() {
this.$refs['form'][0].validate(async (valid) => {
if (valid) {
const isEdit = this.mode == 'edit';
const isEdit = !this.mode.includes('detail');
await this.$axios({
url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
method: isEdit ? 'put' : 'post',