SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/planToAdd/index.vue

<template>
  <ns-view-list-table ref="mainRef" v-bind="config">
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'executionTime'">
        {{ getData(record) }}
      </template>
    </template>
  </ns-view-list-table>
  <NsModalFrom ref="modalFormRef" v-bind="nsModalFormConfig" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import NsModalFrom from '/@/components/ns-modal-form.vue';
  import { planToAddApi } from '/@/api/planToAdd';
  import { NsMessage } from '/nerv-lib/component';
  import { getEnum } from '/@/api';
  import { http } from '/nerv-lib/util';

  //页面 创建
  const orgId = ref('');
  const projectId = ref('');
  const config = ref({});
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  const results = JSON.parse(sessionStorage.getItem('/hx-ai-intelligent/')!);
  projectId.value = results.projectId;
  const mainRef = ref(null);
  const modalFormRef = ref(null);
  const getData = (record: any) => {
    return record.startTime
      ? record.startTime.substring(0, 10) + '  -  ' + record.endTime.substring(0, 10)
      : '未配置时间';
  };
  const nsModalFormConfig = ref({
    api: planToAddApi.updPlan,
    data: {},
    title: '编辑',
    schemas: [
      { field: 'id', component: 'NsInput', show: false },
      { field: 'orgId', component: 'NsInput', show: false },
      {
        field: 'createTime',
        label: '执行时间',
        component: 'NsRangePicker',
        allowClear: true,
        fieldMap: ['startTime', 'endTime'],
        componentProps: {
          valueFormat: 'YYYY-MM-DD hh:mm:ss',
          placeholder: ['开始日期', '结束日期'],
        },
        rules: [
          {
            required: true,
            message: '请选择执行时间',
          },
        ],
      },
    ],
    extraModalConfig: {
      bodyStyle: { paddingBottom: 0 },
    },
    success: (data: any) => {
      if (data.msg === 'success') {
        mainRef.value?.nsTableRef.reload();
      } else {
        NsMessage.error(data.msg);
      }
    },
  });
  const getList = async () => {
    const enumData: any = await getEnum({ params: { enumType: 'CtrlDeviceType' } });
    config.value = {
      title: '计划库',
      api: planToAddApi.getActivatedPlanListByTree,
      params: { orgId, projectId, deviceType: enumData.data[0].value },
      treeConfig: {
        defaultExpandAll: true,
        header: {
          icon: 'name',
          title: '执行计划',
        },
        params: { orgId, projectId, deviceType: enumData.data[0].value },
        dynamicParams: {
          id: 'id',
          pid: 'pid',
          level: 'level',
          projectId: 'projectId',
          deviceType: 'deviceType',
        },
        api: planToAddApi.getActivatedPlanTree,
        fieldNames: {
          title: 'name',
          key: 'id',
          pid: 'pid',
          level: 'level',
          projectId: 'projectId',
          deviceType: 'deviceType',
          children: 'childList',
        },
        formConfig: {
          schemas: [
            {
              field: 'deviceType',
              label: '告警优先级',
              component: 'nsSelectApi',
              autoSubmit: true,
              componentProps: {
                api: () => getEnum({ params: { enumType: 'CtrlDeviceType' } }),
                immediate: true,
                resultField: 'data',
                labelField: 'label',
                valueField: 'value',
                placeholder: '请选择告警优先级',
                showSearch: true,
                autoSelectFirst: true,
                filterOption: (input: string, option: any) => {
                  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                },
              },
            },
          ],
        },
      },
      rowSelection: null,
      columns: [
        {
          title: '执行顺序',
          dataIndex: 'address',
          width: 100,
          customRender: (text: any) => {
            return text.index + 1;
          },
        },
        {
          title: '计划类型',
          dataIndex: 'planGroupName',
        },
        {
          title: '计划名称',
          dataIndex: 'planName',
        },
        {
          title: '执行时间',
          dataIndex: 'executionTime',
        },
      ],
      columnActions: {
        title: '操作',
        actions: [
          {
            label: '编辑',
            name: 'energyAlarmEdit',
            dynamicParams: ['uuid', 'appealType'],
            handle: (data: any) => {
              const obj = { ...data };
              nsModalFormConfig.value.title = '编辑';
              setTimeout(() => {
                nsModalFormConfig.value.data = {
                  id: obj.id,
                };
                if (obj.startTime) {
                  nsModalFormConfig.value.data.createTime = obj.startTime
                    ? [obj.startTime, obj.endTime]
                    : [];
                }
              }, 1);
              modalFormRef.value?.toggle();
            },
          },
          {
            label: '删除',
            name: 'energyAlarmDel',
            dynamicParams: ['uuid', 'appealType'],
            confirm: true,
            handle: (data: any) => {
              http.post(planToAddApi.updPlan, { id: data.id, isDeleted: 1 }).then((res) => {
                if (res.msg === 'success') {
                  NsMessage.success('操作成功');
                  mainRef.value?.nsTableRef.reload();
                } else {
                  NsMessage.error(res.msg);
                }
              });
              mainRef.value?.nsTableRef.reload();
            },
          },
        ],
      },
      formConfig: {
        schemas: [
          {
            field: 'planName',
            label: '计划标题',
            component: 'NsInput',
            componentProps: {
              allowClear: true,
              placeholder: '请输入计划关键字',
            },
          },
        ],
        params: {},
      },
      // pagination: { pageSizeOptions: false },
      rowKey: 'uuid',
    };
  };
  //创建页面调用方法
  onMounted(() => {
    getList();
  });

  defineOptions({
    name: 'LedgerIndex', // 与页面路由name一致缓存才可生效
  });
</script>
<style lang="less" scoped>
  :deep(.ns-table-search),
  :deep(.ns-part-tree),
  :deep(.ns-table-main) {
    box-shadow: @ns-content-box-shadow;
  }
</style>