<template>
|
<div class="h100 flex-column">
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<el-form :inline="true" :model="queryParams">
|
<el-form-item label="名称" prop="Name">
|
<el-input v-model="queryParams.Name" style="width: 226.4px" placeholder="名称" clearable />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
<el-button icon="ele-Plus" @click="openOperateDialog()"> 增加 </el-button>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-switch v-model="isDragStatus" @change="handleDragStatus" inline-prompt active-icon="ele-Check" inactive-icon="ele-Close">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="flex-auto scroll-table-card" shadow="hover" style="margin-top: 8px">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
border
|
row-key="ID"
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column prop="Name" width="220" label="名称" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Color" label="颜色" show-overflow-tooltip>
|
<template #default="scope">
|
<div class="w100 h100 flex-center">
|
<div style="width: 65px; height: 25px" :style="'background-color:' + scope.row.Color"></div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Grade" label="报警等级" show-overflow-tooltip />
|
<el-table-column prop="Description" width="550" label="说明" show-overflow-tooltip />
|
<el-table-column label="操作" width="150" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateDialog(scope.row)"> 编辑 </el-button>
|
<el-button
|
icon="ele-Delete"
|
size="small"
|
text
|
type="danger"
|
@click="
|
deleteCurrentRow(scope.row, '报警等级', alarmLevelApi.DeleteABasicSysAlarmLevel, () => {
|
getTableData();
|
})
|
"
|
>
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-dialog :destroy-on-close="true" v-model="dialogIsShow" width="450" :close-on-click-modal="false" @closed="closeDialog">
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="dialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ dialogTitle }} </span>
|
</div>
|
</template>
|
<el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="78">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="dialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="颜色" prop="Color">
|
<el-color-picker v-model="dialogFormValue.Color" />
|
</el-form-item>
|
<el-form-item label="报警等级" prop="Grade">
|
<el-input-number class="w100" placeholder="请输入报警等级" v-model="dialogFormValue.Grade"></el-input-number>
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="dialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
|
<template #footer>
|
<div>
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
|
import { ref, onMounted, computed, PropType } from 'vue';
|
import { deepClone } from '/@/utils/other';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useTableSort } from '/@/hooks/useTableSort';
|
|
import * as alarmLevelApi from '/@/api/basic/alarmLevel';
|
import { AxiosRequestConfig, AxiosResponse } from 'axios';
|
import { deleteCurrentRow } from '/@/utils/util';
|
import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
|
const props = defineProps({
|
request: {
|
type: Function as PropType<(config: AxiosRequestConfig<any>) => Promise<AxiosResponse<any, any>>>,
|
},
|
});
|
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const getTableData = async () => {
|
tableLoading.value = true;
|
const res = await alarmLevelApi.GetAllBasicSysAlarmLevel(props.request).finally(() => {
|
tableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
const resData = (res.Data || []) as [];
|
tableData.value = resData;
|
} else {
|
ElMessage.error('获取报警等级失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
|
//#region ====================== 表格查询、排序，search form init ======================
|
|
const queryParams = ref({
|
Name: '',
|
});
|
const { handleDragStatus, draggableTableRef } = useTableSort(
|
tableData,
|
alarmLevelApi.UpdateBasicSysAlarmLevelSorter,
|
getTableData,
|
undefined,
|
false,
|
props.request
|
);
|
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData);
|
|
//#endregion
|
|
//#region ====================== 增加、修改记录操作, dialog init======================
|
const isEditDialog = ref(false);
|
const dialogTitle = computed(() => {
|
return isEditDialog.value ? '修改报警等级' : '添加报警等级';
|
});
|
const dialogHeaderIcon = computed(() => {
|
return isEditDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const dialogFormValue = ref(null);
|
const dialogIsShow = ref(false);
|
const dialogFormRef = ref<FormInstance>(null);
|
const initialGrade = ref(null);
|
const { uniquenessValidator } = useValidateUniqueness(
|
alarmLevelApi.IsExistBasicSysAlarmLevelGrade,
|
initialGrade,
|
'报警等级',
|
'Grade',
|
undefined,
|
false,
|
props.request
|
);
|
const dialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
Color: [{ required: true, message: '请选择颜色', trigger: 'blur' }],
|
Grade: [{ required: true, validator: uniquenessValidator as any, trigger: 'blur' }],
|
});
|
const openOperateDialog = (row?) => {
|
if (row) {
|
isEditDialog.value = true;
|
const { ID, Name, Color, Grade, Description } = row;
|
initialGrade.value = Grade;
|
dialogFormValue.value = deepClone({ ID, Name, Color, Grade, Description });
|
} else {
|
isEditDialog.value = false;
|
initialGrade.value = null;
|
dialogFormValue.value = { Name: '', Color: '', Grade: null, Description: '' };
|
}
|
dialogIsShow.value = true;
|
};
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
dialogFormRef.value.clearValidate();
|
};
|
|
const submitFormValue = async () => {
|
const valid = await dialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditDialog.value) {
|
const res = await alarmLevelApi.UpdateABasicSysAlarmLevel(dialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closeDialog();
|
ElMessage.success('修改报警等级成功');
|
} else {
|
ElMessage.error('修改报警等级失败');
|
}
|
} else {
|
ElMessage.error('修改报警等级失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await alarmLevelApi.InsertABasicSysAlarmLevel(dialogFormValue.value, props.request);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closeDialog();
|
ElMessage.success('添加报警等级成功');
|
} else {
|
ElMessage.error('添加报警等级失败');
|
}
|
} else {
|
ElMessage.error('添加报警等级失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
|
//#endregion
|
|
onMounted(() => {
|
getTableData();
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
