123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <template>
- <div class="system-edit-dic-container">
- <el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '事件定义'" v-model="isShowDialog" width="769px">
- <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
- <el-form-item label="事件定义标识" prop="key">
- <el-input v-model="ruleForm.key" placeholder="请输入事件定义标识" />
- </el-form-item>
- <el-form-item label="事件定义名称" prop="name">
- <el-input v-model="ruleForm.name" placeholder="请输入事件定义名称" />
- </el-form-item>
- <el-form-item label="事件级别" prop="level">
- <el-radio-group v-model="ruleForm.level" model-value="0">
- <el-radio label="0">普通</el-radio>
- <el-radio label="1">警告</el-radio>
- <el-radio label="2">紧急</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="输出参数" prop="type">
- <el-select v-model="valueType.type" placeholder="请选择输出参数" @change="seletChange">
- <el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
- <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
- </el-option-group>
- </el-select>
- </el-form-item>
- <!--根据数据类型输出不同表单-->
- <el-form-item label="精度" prop="maxLength1" v-if="type == 'float' || type == 'double'">
- <el-input v-model="valueType.maxLength1" placeholder="请输入精度" />
- </el-form-item>
- <el-form-item label="单位" prop="maxLength" v-if="type == 'int' || type == 'long' || type == 'float' || type == 'double'">
- <el-input v-model="valueType.maxLength" placeholder="请输入单位" />
- </el-form-item>
- <el-form-item label="最大长度" prop="maxLength" v-if="type == 'string'">
- <el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
- </el-form-item>
- <el-form-item label="时间格式" prop="maxLength" v-if="type == 'date'">
- <el-input v-model="valueType.maxLength" placeholder="请输入时间格式" />
- </el-form-item>
- <!--根据数据类型输出不同表单-->
- <el-form-item label="事件定义描述 " prop="desc">
- <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入事件定义描述"></el-input>
- </el-form-item>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="onCancel" size="default">取 消</el-button>
- <el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
- </template>
- <script lang="ts">
- import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
- import api from '/@/api/device';
- import { ElMessage } from 'element-plus';
- interface RuleFormState {
- id: number;
- name: string;
- dictType: string;
- status: number;
- desc: string;
- }
- interface DicState {
- isShowDialog: boolean;
- ruleForm: RuleFormState;
- typeData: RuleFormState[];
- rules: {};
- }
- export default defineComponent({
- name: 'deviceEditPro',
- setup(prop, { emit }) {
- const formRef = ref<HTMLElement | null>(null);
- const state = reactive<DicState>({
- isShowDialog: false,
- typeData: [], //
- type: '',
- valueType: {
- type: '',
- maxLength: '',
- },
- ruleForm: {
- name: '',
- key: '',
- transportProtocol: '',
- accessMode: '0',
- status: 1,
- valueType: {
- type: '',
- maxLength: '',
- },
- desc: '',
- },
- rules: {
- name: [{ required: true, message: '事件定义名称不能为空', trigger: 'blur' }],
- key: [{ required: true, message: '事件定义标识不能为空', trigger: 'blur' }],
- accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
- },
- });
- // 打开弹窗
- const openDialog = (row: RuleFormState | null) => {
- resetForm();
- api.product.getDataType({ status: -1 }).then((res: any) => {
- const datat = Object.values(res.dataType);
- datat.forEach((item, index) => {
- if (index == 0) {
- datat[index]['label'] = '基础类型';
- datat[index]['options'] = item;
- } else {
- datat[index]['label'] = '扩展类型';
- datat[index]['options'] = item;
- }
- });
- state.typeData = datat || [];
- });
- if (row) {
- // api.dict.getType(row.dictId).then((res:any)=>{
- // state.ruleForm = res.data.dictType
- // }
- state.ruleForm = row;
- }
- state.isShowDialog = true;
- };
- const resetForm = () => {
- state.ruleForm = {
- id: 0,
- name: '',
- dictType: '',
- status: 1,
- desc: '',
- };
- };
- const seletChange = (val) => {
- state.type = val;
- };
- // 关闭弹窗
- const closeDialog = () => {
- state.isShowDialog = false;
- };
- // 取消
- const onCancel = () => {
- closeDialog();
- };
- // 新增
- const onSubmit = () => {
- const formWrap = unref(formRef) as any;
- if (!formWrap) return;
- formWrap.validate((valid: boolean) => {
- if (valid) {
- if (state.ruleForm.id !== 0) {
- //修改
- api.product.edit(state.ruleForm).then(() => {
- ElMessage.success('事件定义类型修改成功');
- closeDialog(); // 关闭弹窗
- emit('typeList');
- });
- } else {
- //添加
- state.ruleForm.valueType = state.valueType;
- api.model.eventadd(state.ruleForm).then(() => {
- ElMessage.success('事件定义类型添加成功');
- closeDialog(); // 关闭弹窗
- emit('typeList');
- });
- }
- }
- });
- };
- return {
- openDialog,
- seletChange,
- closeDialog,
- onCancel,
- onSubmit,
- formRef,
- ...toRefs(state),
- };
- },
- });
- </script>
- <style scoped>
- .avatar-uploader .avatar {
- width: 178px;
- height: 178px;
- display: block;
- }
- </style>
- <style>
- .avatar-uploader .el-upload {
- border: 1px dashed var(--el-border-color);
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- transition: var(--el-transition-duration-fast);
- }
- .avatar-uploader .el-upload:hover {
- border-color: var(--el-color-primary);
- }
- .el-icon.avatar-uploader-icon {
- font-size: 28px;
- color: #8c939d;
- width: 178px;
- height: 178px;
- text-align: center;
- }
- </style>
|