xiaodou-ai-admin/src/pages/Iot/sys/notice.vue

<template>
  <a-card>
    <a-row>
      <a-col span="12">
        <a-form layout="inline" >
          <a-form-item label="通知名称" >
            <a-input v-model:value="queryParamsState.label" placeholder="请输入通知名称"/>
          </a-form-item>
          <a-form-item  label='通知数据来源' >
            <a-select
              style="width: 170px"
              v-model:value="queryParamsState.source"
            >
              <a-select-option
                v-for="item in sourceList"
                :key="item.key"
                :value="item.key"
              >
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-item >
          <a-form-item>
            <a-button type="primary" @click="getNoticePage">搜索</a-button>
          </a-form-item>
      </a-form>
      </a-col>
      <a-col span="12" >
        <a-row justify="end" >
          <a-button type="primary" @click="openModal('add')" >新增</a-button>
        </a-row>
      </a-col>
    </a-row>
    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
      :pagination="queryParamsState"
      @change="changePage"
    >
      <template #bodyCell="{column, record}">
            <template v-if="column.key === 'status'" >
              <a-switch
                @click="changeStatus(record)"
                v-model:checked="record.status"
                checked-children="运行中"
                un-checked-children="已关闭"
              />
            </template>
            <template v-if="column.key === 'action'" >
              <a-space>
                <a @click="openModal('update', record.id)" >编辑</a>
                <a-popconfirm
                    title="确实要删除吗？"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="delNotice(record.id)"
                  >
                  <a>删除</a>
                  </a-popconfirm>
              </a-space>
            </template>
      </template>
    </a-table>
  </a-card>

  <modal-pro
    :label="modalTitle"
    :visible="state.visible"
    destroyOnClose
    @cancel="state.visible = false"
    @ok="ok"
  >
    <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
      <a-form-item label="任务名称" v-bind="validateInfos.taskLabel">
        <a-input v-model:value="modalRef.taskLabel"  />
      </a-form-item>
      <a-form-item label="任务描述" >
        <a-input v-model:value="modalRef.taskDescription" />
      </a-form-item>
      <a-form-item label="选择产品" >
        <a-select
          placeholder="请选择产品"
          v-model:value="modalRef.taskConfig.modelId"
        >
          <a-select-option
            v-for="model in state.modelList"
            :key="model.id"
            :value="model.id"
          >
            {{model.modelLabel}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="选择设备" >
        <a-select
          placeholder="请选择产品"
          v-model:value="modalRef.taskConfig.deviceId"
        >
          <a-select-option
            v-for="device in state.deviceList"
            :key="device.id"
            :value="device.id"
          >
            {{device.deviceLabel}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="任务类型" v-bind="validateInfos.taskType">
        <a-select v-model:value="modalRef.taskConfig.taskType" >
          <a-select-option
            :value="item"
            v-for="item in TaskController.taskTypeList"
            :key="item"
          >
            {{TaskController.taskTypeMap.get(item)?.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <span v-if="modalRef.taskConfig.taskType === 'DEVICE_CMD'" >
        <a-form-item label="选择命令" >
          <a-select
            style="width: 170px;"
            v-model:value="modalRef.taskConfig.cmdId"
          >
            <a-select-option
              v-for="cmdItem in state.cmdList"
              :key="cmdItem.id"
              :value="cmdItem.id"
            >
            {{cmdItem.cmdLabel}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="命令参数" >
          <div
            v-for="(item, index) in modalRef.taskConfig.cmdParameters"
            :key="index"
            style="margin-bottom: 10px;"
          >
            <a-input-group compact  >
              <a-input placeholder="key"  disabled v-model:value="item.paramLabel" style="width: 50%" />
              <a-input placeholder="value" v-model:value="item.dataUnit" style="width: 50%" />
            </a-input-group>
          </div>
        </a-form-item>
      </span>
      <span v-if="modalRef.taskConfig.taskType === 'DEVICE_MSG'" >
        <a-form-item label="主题" >
          <a-input v-model:value="modalRef.taskConfig.topic"  />
        </a-form-item>
        <a-form-item label="消息名称" >
          <a-input v-model:value="modalRef.taskConfig.msgLabel"  />
        </a-form-item>
        <a-form-item label="消息内容" >
          <a-textarea :auto-size="{ minRows: 2, maxRows: 5 }" v-model:value="modalRef.taskConfig.msgPayload"  />
        </a-form-item>
      </span>

    </a-form>
  </modal-pro>
</template>

<script lang="ts" setup >
import { reactive, onMounted, computed } from 'vue'
import { SysController } from '@/controller'
import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const columns = [
  {
    title: 'id',
    dataIndex: 'id'
  },
  {
    title: '通知名称',
    dataIndex: 'label',
    key: 'label'
  },
  {
    title: '通知数据来源',
    dataIndex: 'source',
    key: 'source'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const sourceList = [{ key: 0, label: '通知' }, { key: 1, label: '告警' }]

const queryParamsState = reactive({
  page: 1,
  pageSize: 10,
  label: '',
  source: ''
})

const state = reactive({
  dataSource: [],
  loading: false,
  visible: false,
  opraState: 'add',
  noticeId: ''
})

const modalRef = reactive({
  label: '',
  source: 0,
  status: false
})

const modalTitle = computed(() => state.opraState === 'add' ? '新增通知' : '编辑通知')

const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
  label: [{ required: true, message: '请填写通知名称' }]
}))

const ok = () => {

}

const openModal = (opraState: 'add' | 'update', id = '') => {
  state.opraState = opraState
  state.visible = true
  state.noticeId = id
  if (opraState === 'update') {
    getNoticeById()
  }
}

const changePage = ({ current }) => {
  queryParamsState.page = current
  getNoticePage()
}

const delNotice = (id: string) => SysController.delNotice(id)

const changeStatus = async (record) => SysController.updateNoticeStaus({ id: record.id, status: record.status })

const getNoticeById = async () => {
  const { data } = await SysController.noticeById(state.noticeId)
  resetFields(data)
}

const getNoticePage = async () => {
  state.loading = true
  const { data } = await SysController.noticeMethodPage(queryParamsState)
  state.loading = false
  state.dataSource = data
}

onMounted(() => {
  getNoticePage()
})

</script>

<style lang="less" scoped >
</style>