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

<template>
  <div style="width: 100%; height: 100%; position: relative">
    <ns-view-list-table ref="mainRef" v-bind="config">
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'executionTime'">
          {{ getData(record) }}
        </template>
        <template v-if="column.dataIndex === 'executeStatus'">
          <div
            :style="{
              color: {
                '0': '#ccc',
                '1': 'rgba(255, 165, 0, 1)',
                '2': 'rgb(57, 215, 187)',
                '3': 'rgb(255, 0, 0)',
              }[record.executeStatus.value],
            }">
            {{ record.executeStatus.label }}</div
          >
        </template>
      </template>
    </ns-view-list-table>
    <a-button
      type="primary"
      style="position: absolute; bottom: 20px; height: 30px; left: 13%"
      @click="addPlan"
      >添加</a-button
    >
    <NsModalFrom ref="modalFormRef" v-bind="nsModalFormConfig" />
  </div>
</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 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 addPlan = () => {
    if (mainRef.value.nsTableRef.treeElRef.selectedRow.node.planLib) {
      http
        .get(planToAddApi.addPlan, {
          libId: mainRef.value.nsTableRef.treeElRef.selectedRow.node.planLib.id,
        })
        .then((res) => {
          if (res.msg === 'success') {
            NsMessage.success('添加成功');
            mainRef.value?.nsTableRef.reload();
          } else {
            NsMessage.error(res.msg);
          }
        });
    } else {
      NsMessage.warning('只有最后一级才能添加');
    }
  };
  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: 'siteId', component: 'NsInput', show: false },
      { field: 'planCode', component: 'NsInput', show: false },
      { field: 'planGroupCode', component: 'NsInput', show: false },
      { field: 'planGroupName', component: 'NsInput', show: false },
      { field: 'planName', component: 'NsInput', show: false },
      { field: 'projectId', component: 'NsInput', show: false },
      { field: 'ctrlType', 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();
      }
    },
  });
  const config = ref(null);
  const enumDataList: any = () => {
    return getEnum({ params: { enumType: 'DeviceCtrlType' } });
  };
  const getConfigData = async () => {
    const enumData = await enumDataList();
    config.value = {
      title: '计划库',
      api: planToAddApi.getActivatedPlanListByTree,
      params: { orgId, projectId },
      treeConfig: {
        defaultExpandAll: true,
        header: {
          icon: 'name',
          title: '执行计划',
        },
        params: { projectId, ctrlType: enumData.data[0].value },
        dynamicParams: {
          projectId: 'projectId',
          treeId: 'id',
        },
        api: planToAddApi.getActivatedPlanTree,
        fieldNames: {
          title: 'name',
          key: 'id',
          children: 'childList',
        },
        formConfig: {
          callList: true, // 刷新列表
          defaultSelection: true, //树默认选择第一个
          schemas: [
            {
              field: 'ctrlType',
              label: '类型',
              component: 'nsSelectApi',
              autoSubmit: true,
              componentProps: {
                api: () => getEnum({ params: { enumType: 'DeviceCtrlType' } }),
                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: 'executeStatus',
        },
        {
          title: '执行时间',
          dataIndex: 'executionTime',
        },
      ],
      columnActions: {
        title: '操作',
        width: 200,
        fixed: 'right',
        dataIndex: 'tableAction',
        actions: [
          {
            label: '编辑',
            name: 'energyAlarmEdit',
            dynamicParams: ['uuid', 'appealType'],
            handle: (data: any) => {
              if (data?.executeStatus?.value === 2) {
                NsMessage.warning('当前计划正在执行，无法进行编辑。如需编辑，请先停止计划。');
              } else {
                const obj = { ...data };
                nsModalFormConfig.value.title = '编辑';
                setTimeout(() => {
                  nsModalFormConfig.value.data = {
                    ...obj,
                  };
                  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.delPlan, [data.id]).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',
    };
    //刷新列表
    // setTimeout(() => {
    //   mainRef.value?.nsTableRef.reload();
    // }, 1);
  };

  //创建页面调用方法
  onMounted(() => {
    getConfigData();
  });
  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>