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

<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <a-tabs>
      <a-tab-pane key="1" tab="更新状态">Content of Tab Pane 1</a-tab-pane>
      <a-tab-pane key="2" tab="状态流程">
        <!-- <a-steps direction="vertical" :current="4">
          <template v-for="index in 4">
            <a-step>
              <template #icon>
                <img src="../../../../src/icon/status-off.svg" />
              </template>
              <template #description>
                <div
                  style="
                    width: 400px;
                    min-height: 40px;
                    background-color: #f8fafc;
                    margin-left: 20px;
                    border-radius: 4px; /* 设置圆角半径 */
                    padding: 12px;
                  ">
                  <div style="width: 100%; height: 40px; display: flex; position: relative">
                    <a-tag style="width: 60px; height: 20px; text-align: center" color="#04d919"
                      >已完成</a-tag
                    >
                    <div
                      style="
                        position: absolute;
                        left: 30%;
                        top: -2px;
                        transform: translateX(-50%);
                        color: #3a3a3a;
                      "
                      >李四</div
                    >
                    <div style="position: absolute; right: 10px; top: -2px; color: #ff7602"
                      >2024-03-11 11:30:06</div
                    >
                  </div>
                  <div style="width: 100%; color: #3a3a3a"> 工单已完成并通过验收 </div>
                </div>
              </template>
            </a-step>
          </template>
        </a-steps> -->
        <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 logList = ref([
        { name: '李四', status: '2' },
        { name: '王五', status: '4' },
        { name: '王五', status: '3' },
        { name: '王五', status: '1' },
        { name: '赵六', status: '0' },
      ]);
      const config = ref({
        size: logList.value.length,
        dataSource: logList.value,
      });
      const handleClose = () => {
        visible.value = false;
      };
      const btnClick = () => {
        console.log('btnClick');
      };
      const toggle = (data) => {
        console.log(data, 'data');
        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 {
        btnClick,
        createOrder,
        visible,
        logList,
        config,
        handleClose,
        toggle,
      };
    },
  });
</script>
<style scoped lang="less"></style>