SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue

<template>
  <ns-drawer
    v-model:visible="visible"
    width="562px"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <a-tabs>
      <a-tab-pane key="1" tab="更新状态">
        <div style="width: 100%; padding: 24px">
          <a-form ref="formRef" :model="infoObject" :rules="rules">
            <a-form-item ref="state" label="当前状态" name="state">
              <a-select
                v-model:value="infoObject.state"
                show-search
                placeholder="请选择当前状态"
                style="width: 85%"
                :options="stateOptions"
                :disabled="showEdit" />
              <ns-icon
                size="20"
                @click="changeShowEdit"
                style="margin-left: 20px"
                :name="showEdit ? 'bianji' : 'baocun'" />
            </a-form-item>
            <a-form-item label="备注" name="remarks">
              <a-textarea
                v-model:value="infoObject.remarks"
                placeholder="请输入备注"
                :disabled="showEdit"
                style="width: 85%"
                @keydown="handleKeyDown"
                :autoSize="{ minRows: 4, maxRows: 4 }" />
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="状态流程">
        <!-- 自动生成工单 -->
        <div v-if="infoObject.createWorkOrder === 1"> xxxx </div>
        <!-- 没有自动生成工单 -->
        <NsSteps v-else v-bind="config" />
      </a-tab-pane>
    </a-tabs>
    <template #footer>
      <a-button type="primary" @click="btnClick">确定</a-button>
    </template>
  </ns-drawer>
</template>
<script>
  import { defineComponent } from 'vue';
  import { ref } from 'vue';
  import NsSteps from '/@/components/ns-steps.vue';
  import { NsMessage } from '/nerv-lib/component';
  import { http } from '/nerv-lib/util';
  import { equipmentAlarmApi } from '/@/api/alarmManagement/equipmentAlarm';
  import { getEnum } from '/@/api';

  export default defineComponent({
    components: { NsSteps },

    setup(props, { emit }) {
      const visible = ref(false);
      const showEdit = ref(true);
      const infoObject = ref({});
      const equipmentAlarm = ref({});
      const stateOptions = ref();
      const logList = ref([]);
      const formRef = ref();
      const config = ref({
        size: logList.value.length,
        dataSource: logList.value,
      });
      // 表单校验
      const rules = {
        remarks: [
          {
            required: true,
            message: '请输入备注',
            trigger: 'change',
            validator: (rules, remarks, cbfn) => {
              if (remarks && remarks.trim() !== '') {
                cbfn();
              } else {
                cbfn('备注不能为空');
              }
            },
          },
        ],
        state: [{ required: true, message: '请选择当前状态', trigger: 'change' }],
      };
      const handleClose = () => {
        showEdit.value = true;
        equipmentAlarm.value = {};
        infoObject.value = {};
        visible.value = false;
        config.value.dataSource = [];
        logList.value = [];
        formRef.value.resetFields();
      };
      const btnClick = () => {
        formRef.value.validate().then(() => {
          delete infoObject.value.createTime;
          infoObject.value.alarmEquipmentLogId = equipmentAlarm.value.id;
          if (equipmentAlarm.value.createWorkOrder === 0) {
            http.post(equipmentAlarmApi.noCreatOrUpdateLog, infoObject.value).then((res) => {
              if (res.msg === 'success') {
                NsMessage.success('操作成功');
                showEdit.value = true;
                equipmentAlarm.value = {};
                infoObject.value = {};
                visible.value = false;
                emit('logAdd', null);
              }
            });
          }
        });
      };
      //修改状态
      const changeShowEdit = () => {
        // 未生成工单
        if (equipmentAlarm.value.createWorkOrder === 0) {
          showEdit.value = !showEdit.value;
        }
      };
      const handleKeyDown = (event) => {
        // Check if the pressed key is a space
        if (event.code === 'Space') {
          event.preventDefault();
        }
      };
      const toggle = async (data) => {
        equipmentAlarm.value = { ...data };
        visible.value = true;
        let states = await getEnum({ params: { enumType: 'AlarmLogStateEnum' } });
        stateOptions.value = states.data;
        if (equipmentAlarm.value.createWorkOrder !== 1) {
          stateOptions.value = stateOptions.value.filter((item) => item.value !== 4);
        }
        await http
          .post(equipmentAlarmApi.getSelectAlarmEquipmentLogStatusProcess, {
            alarmEquipmentLogId: data.id,
          })
          .then((res) => {
            if (res.msg === 'success') {
              logList.value = res.data;
              if (logList.value.length > 0) {
                infoObject.value = { ...logList.value[0] };
                infoObject.value.state = infoObject.value.state.value;
                let colorMap = {
                  1: 'rgba(255, 188, 70, 1)',
                  2: 'rgba(67, 136, 251, 1)',
                  3: 'rgba(41, 196, 154, 1)',
                  4: 'rgba(243, 97, 99, 1)',
                  5: 'rgba(141, 150, 163, 1)',
                };
                let bgColorMap = {
                  1: 'rgba(255, 188, 70, 0.1)',
                  2: 'rgba(67, 136, 251, 0.1)',
                  3: 'rgba(41, 196, 154, 0.1)',
                  4: 'rgba(243, 97, 99, 0.1)',
                  5: 'rgba(141, 150, 163, 0.1)',
                };
                logList.value.forEach((item) => {
                  item.stateName = item.state.label;
                  item.color = colorMap[item.state.value];
                  item.bgColor = bgColorMap[item.state.value];
                  item.src = 'state-' + item.state.value;
                });
                config.value.dataSource = logList.value;
              }
            }
          });
      };
      return {
        infoObject,
        rules,
        formRef,
        changeShowEdit,
        showEdit,
        equipmentAlarm,
        handleKeyDown,
        stateOptions,
        btnClick,
        visible,
        logList,
        config,
        handleClose,
        toggle,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.ant-form-item-label) {
    z-index: 20;
    text-align: right;
    width: 17%;
  }
</style>