editEvent.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  2. <div class="system-edit-dic-container">
  3. <el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '事件定义'" v-model="isShowDialog" width="769px">
  4. <el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
  5. <el-form-item label="事件定义标识" prop="key">
  6. <el-input v-model="ruleForm.key" placeholder="请输入事件定义标识" />
  7. </el-form-item>
  8. <el-form-item label="事件定义名称" prop="name">
  9. <el-input v-model="ruleForm.name" placeholder="请输入事件定义名称" />
  10. </el-form-item>
  11. <el-form-item label="事件级别" prop="level">
  12. <el-radio-group v-model="ruleForm.level" model-value="0">
  13. <el-radio label="0">普通</el-radio>
  14. <el-radio label="1">警告</el-radio>
  15. <el-radio label="2">紧急</el-radio>
  16. </el-radio-group>
  17. </el-form-item>
  18. <el-form-item label="输出参数" prop="type">
  19. <el-select v-model="valueType.type" placeholder="请选择输出参数" @change="seletChange">
  20. <el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
  21. <el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
  22. </el-option-group>
  23. </el-select>
  24. </el-form-item>
  25. <!--根据数据类型输出不同表单-->
  26. <el-form-item label="精度" prop="maxLength1" v-if="type == 'float' || type == 'double'">
  27. <el-input v-model="valueType.maxLength1" placeholder="请输入精度" />
  28. </el-form-item>
  29. <el-form-item label="单位" prop="maxLength" v-if="type == 'int' || type == 'long' || type == 'float' || type == 'double'">
  30. <el-input v-model="valueType.maxLength" placeholder="请输入单位" />
  31. </el-form-item>
  32. <el-form-item label="最大长度" prop="maxLength" v-if="type == 'string'">
  33. <el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
  34. </el-form-item>
  35. <el-form-item label="时间格式" prop="maxLength" v-if="type == 'date'">
  36. <el-input v-model="valueType.maxLength" placeholder="请输入时间格式" />
  37. </el-form-item>
  38. <!--根据数据类型输出不同表单-->
  39. <el-form-item label="事件定义描述 " prop="desc">
  40. <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入事件定义描述"></el-input>
  41. </el-form-item>
  42. </el-form>
  43. <template #footer>
  44. <span class="dialog-footer">
  45. <el-button @click="onCancel" size="default">取 消</el-button>
  46. <el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
  47. </span>
  48. </template>
  49. </el-dialog>
  50. </div>
  51. </template>
  52. <script lang="ts">
  53. import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
  54. import api from '/@/api/device';
  55. import { ElMessage } from 'element-plus';
  56. interface RuleFormState {
  57. id: number;
  58. name: string;
  59. dictType: string;
  60. status: number;
  61. desc: string;
  62. }
  63. interface DicState {
  64. isShowDialog: boolean;
  65. ruleForm: RuleFormState;
  66. typeData: RuleFormState[];
  67. rules: {};
  68. }
  69. export default defineComponent({
  70. name: 'deviceEditPro',
  71. setup(prop, { emit }) {
  72. const formRef = ref<HTMLElement | null>(null);
  73. const state = reactive<DicState>({
  74. isShowDialog: false,
  75. typeData: [], //
  76. type: '',
  77. valueType: {
  78. type: '',
  79. maxLength: '',
  80. },
  81. ruleForm: {
  82. name: '',
  83. key: '',
  84. transportProtocol: '',
  85. accessMode: '0',
  86. status: 1,
  87. valueType: {
  88. type: '',
  89. maxLength: '',
  90. },
  91. desc: '',
  92. },
  93. rules: {
  94. name: [{ required: true, message: '事件定义名称不能为空', trigger: 'blur' }],
  95. key: [{ required: true, message: '事件定义标识不能为空', trigger: 'blur' }],
  96. accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
  97. },
  98. });
  99. // 打开弹窗
  100. const openDialog = (row: RuleFormState | null) => {
  101. resetForm();
  102. api.product.getDataType({ status: -1 }).then((res: any) => {
  103. const datat = Object.values(res.dataType);
  104. datat.forEach((item, index) => {
  105. if (index == 0) {
  106. datat[index]['label'] = '基础类型';
  107. datat[index]['options'] = item;
  108. } else {
  109. datat[index]['label'] = '扩展类型';
  110. datat[index]['options'] = item;
  111. }
  112. });
  113. state.typeData = datat || [];
  114. });
  115. if (row) {
  116. // api.dict.getType(row.dictId).then((res:any)=>{
  117. // state.ruleForm = res.data.dictType
  118. // }
  119. state.ruleForm = row;
  120. }
  121. state.isShowDialog = true;
  122. };
  123. const resetForm = () => {
  124. state.ruleForm = {
  125. id: 0,
  126. name: '',
  127. dictType: '',
  128. status: 1,
  129. desc: '',
  130. };
  131. };
  132. const seletChange = (val) => {
  133. state.type = val;
  134. };
  135. // 关闭弹窗
  136. const closeDialog = () => {
  137. state.isShowDialog = false;
  138. };
  139. // 取消
  140. const onCancel = () => {
  141. closeDialog();
  142. };
  143. // 新增
  144. const onSubmit = () => {
  145. const formWrap = unref(formRef) as any;
  146. if (!formWrap) return;
  147. formWrap.validate((valid: boolean) => {
  148. if (valid) {
  149. if (state.ruleForm.id !== 0) {
  150. //修改
  151. api.product.edit(state.ruleForm).then(() => {
  152. ElMessage.success('事件定义类型修改成功');
  153. closeDialog(); // 关闭弹窗
  154. emit('typeList');
  155. });
  156. } else {
  157. //添加
  158. state.ruleForm.valueType = state.valueType;
  159. api.model.eventadd(state.ruleForm).then(() => {
  160. ElMessage.success('事件定义类型添加成功');
  161. closeDialog(); // 关闭弹窗
  162. emit('typeList');
  163. });
  164. }
  165. }
  166. });
  167. };
  168. return {
  169. openDialog,
  170. seletChange,
  171. closeDialog,
  172. onCancel,
  173. onSubmit,
  174. formRef,
  175. ...toRefs(state),
  176. };
  177. },
  178. });
  179. </script>
  180. <style scoped>
  181. .avatar-uploader .avatar {
  182. width: 178px;
  183. height: 178px;
  184. display: block;
  185. }
  186. </style>
  187. <style>
  188. .avatar-uploader .el-upload {
  189. border: 1px dashed var(--el-border-color);
  190. border-radius: 6px;
  191. cursor: pointer;
  192. position: relative;
  193. overflow: hidden;
  194. transition: var(--el-transition-duration-fast);
  195. }
  196. .avatar-uploader .el-upload:hover {
  197. border-color: var(--el-color-primary);
  198. }
  199. .el-icon.avatar-uploader-icon {
  200. font-size: 28px;
  201. color: #8c939d;
  202. width: 178px;
  203. height: 178px;
  204. text-align: center;
  205. }
  206. </style>