detail.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <template>
  2. <div class="system-edit-dic-container">
  3. <el-dialog title="日志详情" v-model="isShowDialog" width="769px">
  4. <el-form ref="formRef" size="default" label-width="110px">
  5. <el-form-item label="内容">
  6. <div v-html="content"></div>
  7. </el-form-item>
  8. </el-form>
  9. <template #footer>
  10. <span class="dialog-footer">
  11. <el-button @click="onCancel" size="default">取 消</el-button>
  12. </span>
  13. </template>
  14. </el-dialog>
  15. </div>
  16. </template>
  17. <script lang="ts">
  18. import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
  19. import api from '/@/api/alarm';
  20. import { ElMessage } from 'element-plus';
  21. interface DicState {
  22. isShowDialog: boolean;
  23. ruleForm: RuleFormState;
  24. content: '';
  25. }
  26. export default defineComponent({
  27. name: 'Edit',
  28. setup(prop, { emit }) {
  29. const formRef = ref<HTMLElement | null>(null);
  30. const state = reactive<DicState>({
  31. isShowDialog: false,
  32. content: '',
  33. });
  34. // 打开弹窗
  35. const openDialog = (row: RuleFormState | null) => {
  36. state.content=row.content;
  37. state.isShowDialog = true;
  38. };
  39. // 关闭弹窗
  40. const closeDialog = () => {
  41. state.isShowDialog = false;
  42. };
  43. // 取消
  44. const onCancel = () => {
  45. closeDialog();
  46. };
  47. return {
  48. openDialog,
  49. closeDialog,
  50. onCancel,
  51. formRef,
  52. ...toRefs(state),
  53. };
  54. },
  55. });
  56. </script>