perf(views): 添加“执行动作”组件

src/views/alarm-manage/AlarmExecution.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+
+import DataSelection from '@/components/DataSelection.vue';
+import { t } from '@/i18n';
+
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { DataSelectionItem, DictValue, ExecutionAction } from '@/types';
+
+interface Props {
+  index: number;
+  form: ExecutionAction;
+  executionAction: DictValue[];
+  alarmNotifyMethod: DictValue[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['deleteClick']);
+const dataSelectionRef = useTemplateRef('dataSelection');
+const formRef = ref<FormInstance>();
+const parametersName = ref<string>('');
+const rules: Record<string, Rule[]> = {
+  subType: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmNotifyMethod: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmContact: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmAlertContent: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmWaitTime: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  paramCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmAdjustmentValue: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+
+const formRefSubmit = () => {
+  return formRef.value?.validate() || Promise.resolve();
+};
+
+const parameterSelection = () => {
+  dataSelectionRef.value?.showView();
+  dataSelectionRef.value?.addAllGatewayList(-1);
+};
+
+const confirmClick = (value: DataSelectionItem) => {
+  const { groupId, childGroupId, deviceId, parametersName: name, paramCode } = value;
+  props.form.groupId = groupId;
+  props.form.childGroupId = childGroupId;
+  props.form.deviceId = deviceId;
+
+  props.form.paramCode = paramCode;
+  parametersName.value = name;
+
+  dataSelectionRef.value?.hideView();
+};
+
+const deleteExecutionConditions = () => {
+  emit('deleteClick', props.index);
+};
+
+defineExpose({
+  formRefSubmit,
+});
+</script>
+
+<template>
+  <div>
+    <AForm ref="formRef" :model="form" label-align="left" layout="vertical" :rules="rules">
+      <ABadge>
+        <template #count>
+          <SvgIcon @click="deleteExecutionConditions" class="icon-delete" name="close-circle" />
+        </template>
+        <AFlex class="conditions-bgc" wrap="wrap">
+          <AFormItem label="执行动作" name="subType">
+            <ASelect
+              class="select-input select-right"
+              v-model:value="form.subType"
+              :options="executionAction"
+              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="通知方式" name="alarmNotifyMethod" v-if="form.subType === '3'">
+            <ASelect
+              class="select-input select-right"
+              v-model:value="form.alarmNotifyMethod"
+              :options="alarmNotifyMethod"
+              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="联系人" name="alarmContact" v-if="form.subType === '3'">
+            <ASelect
+              class="select-input select-right"
+              v-model:value="form.alarmContact"
+              :placeholder="$t('common.plzSelect')"
+            >
+              <ASelectOption :value="0">王某某</ASelectOption>
+              <ASelectOption :value="1">汪某某</ASelectOption>
+              <ASelectOption :value="2">何某某</ASelectOption>
+              <ASelectOption :value="3">黄某某</ASelectOption>
+            </ASelect>
+          </AFormItem>
+          <br />
+          <AFormItem label="报警内容" name="alarmAlertContent" v-if="form.subType === '3'">
+            <AInput
+              placeholder="请输入"
+              style="width: 840px"
+              v-model:value="form.alarmAlertContent"
+              show-count
+              :maxlength="32"
+            />
+          </AFormItem>
+          <AFormItem label="等待时间" name="alarmWaitTime" v-if="form.subType === '4'">
+            <ATimePicker
+              class="select-input select-right"
+              v-model:value="form.alarmWaitTime"
+              format="mm:ss"
+              :allow-clear="false"
+            />
+          </AFormItem>
+          <AFormItem label="设备参数" name="paramCode" v-if="form.subType === '5'">
+            <div @click="parameterSelection">
+              <AFlex justify="space-between" align="center" class="div-style">
+                <div v-if="form.paramCode">
+                  {{ parametersName }}
+                </div>
+                <div class="div-style-text" v-else>请选择</div>
+                <div>
+                  <SvgIcon class="icon-style" name="right" />
+                </div>
+              </AFlex>
+            </div>
+          </AFormItem>
+          <AFormItem label="调整值" name="alarmAdjustmentValue" v-if="form.subType === '5'">
+            <AInput placeholder="请输入" class="select-input select-right" v-model:value="form.alarmAdjustmentValue" />
+          </AFormItem>
+        </AFlex>
+      </ABadge>
+    </AForm>
+
+    <DataSelection
+      ref="dataSelection"
+      :select-type="0"
+      :form="{
+        groupId: form.groupId,
+        childGroupId: form.childGroupId,
+        deviceId: form.deviceId,
+        paramCode: form.paramCode,
+      }"
+      @confirmClick="confirmClick"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.div-style-text {
+  color: #d9d9d9;
+}
+
+.icon-style {
+  margin-top: 5px;
+  color: rgb(0 0 0 / 25%);
+}
+
+.div-style {
+  width: 192px;
+  height: 32px;
+  padding: 0 11px;
+  margin-right: 24px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid rgb(0 0 0 / 15%);
+  border-radius: 4px;
+}
+
+.div-style:hover {
+  border-color: var(--antd-color-primary-hover);
+}
+
+.icon-delete {
+  top: 32px;
+  right: 16px;
+  font-size: 16px;
+  color: #ccc;
+  cursor: pointer;
+}
+
+.select-input {
+  width: 192px;
+}
+
+.select-right {
+  margin-right: 24px;
+}
+
+.conditions-bgc {
+  width: 872px;
+  padding: 16px;
+  margin-top: 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+</style>