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

<template>
  <ns-drawer
    v-model:visible="visible"
    width="550"
    :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="status" label="当前状态" name="status">
              <a-select
                v-model:value="infoObject.status"
                show-search
                placeholder="请选择设备点位"
                style="width: 85%"
                :options="statusOptions"
                :disabled="showEdit"
                :filter-option="filterDevicePoint" />
              <ns-icon
                size="20"
                @click="() => (showEdit = !showEdit)"
                style="margin-left: 20px"
                :name="showEdit ? 'bianji' : 'baocun'" />
            </a-form-item>
            <a-form-item label="备注" name="desc">
              <a-textarea
                v-model:value="infoObject.desc"
                placeholder="请输入异常描述"
                :disabled="showEdit"
                style="width: 85%"
                :autoSize="{ minRows: 4, maxRows: 4 }" />
            </a-form-item>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="状态流程">
        <NsSteps v-bind="config" />
      </a-tab-pane>
    </a-tabs>
    <template #footer>
      <!-- <a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button> -->
      <a-button type="primary" @click="btnClick">确定</a-button>
    </template>
  </ns-drawer>
</template>
<script>
  import { defineComponent } from 'vue';
  import { ref, createVNode } from 'vue';
  import NsSteps from '/@/components/ns-steps.vue';
  import { NsMessage, NsModal } from '/nerv-lib/component';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    components: { NsSteps },

    setup() {
      const visible = ref(false);
      const showEdit = ref(true);
      const infoObject = ref({});
      const statusOptions = ref([
        { value: '0', label: '待处理' },
        { value: '1', label: '处理中' },
        { value: '2', label: '已完成' },
        { value: '3', label: '超时' },
        { value: '4', label: '已关闭' },
      ]);
      const logList = ref([
        { name: '李四', status: '2', time: '2024-03-10 10:00:00', desc: '完成' },
        { name: '王五', status: '4', time: '2024-03-10 10:00:00' },
        { name: '王五', status: '3', time: '2024-03-10 10:00:00' },
        { name: '王五', status: '1', time: '2024-03-10 10:00:00', desc: '创建工单' },
        { name: '赵六', status: '0', time: '2024-03-10 10:00:00' },
      ]);
      const config = ref({
        size: logList.value.length,
        dataSource: logList.value,
      });
      const handleClose = () => {
        visible.value = false;
      };
      const btnClick = () => {
        console.log('btnClick');
      };
      const toggle = (data) => {
        infoObject.value = { ...logList.value[0] };
        let statusMap = {
          0: '待处理',
          1: '处理中',
          2: '已完成',
          3: '超时',
          4: '已关闭',
        };
        let colorMap = {
          0: '#ff7602',
          1: '#00a1e6',
          2: '#04d919',
          3: '#d9001b',
          4: '#a6a6a6',
        };
        logList.value.forEach((item) => {
          item.statusName = statusMap[item.status];
          item.color = colorMap[item.status];
          item.src = 'status-' + item.status;
        });
        visible.value = true;
      };
      const createOrder = () => {
        NsModal.confirm({
          title: '提示',
          icon: createVNode(ExclamationCircleOutlined),
          content: '是否创建工单',
          okText: '确认',
          okType: 'primary',
          cancelText: '取消',
          onOk() {
            NsModal.confirm({
              title: '提示',
              icon: createVNode(ExclamationCircleOutlined),
              content: '工单创建成功，工单号xxxxxxxxx',
              okText: '确认',
              okType: 'primary',
              cancelButtonProps: { style: { display: 'none' } }, // 正确设置取消按钮样式
              onOk() {
                console.log('创建工单');
              },
            });
          },
          onCancel() {
            console.log('Cancel');
          },
        });
      };
      return {
        infoObject,
        showEdit,
        statusOptions,
        btnClick,
        createOrder,
        visible,
        logList,
        config,
        handleClose,
        toggle,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.ant-form-item-label) {
    z-index: 20;
    text-align: right;
    width: 17%;
  }
</style>