一些优化

Ben Lin

2024-05-29 cba73428d36a0e0b0f66394f29715b430808de3d

 src/views/tigerprojects/mes/smt/tool/smt_mt_project/index.vue

@@ -2,26 +2,31 @@
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button color="primary" @click="handleAdd"> 添加 </a-button>
        <a-button ghost color="primary" @click="aoaToExcel"> 导出 </a-button>
        <a-button color="primary" @click="handleAdd" preIcon="add_02|svg"> 新增 </a-button>
        <a-button ghost color="success" @click="aoaToExcel" preIcon="excel-export|svg">
          导出
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[
      {
        icon: 'clarity:note-edit-line',
        tooltip: '修改',
        onClick: handleEdit.bind(null, record),
      },
      {
        icon: 'ant-design:delete-outlined',
        tooltip: '删除',
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: handleDelete.bind(null, record),
        },
      },
    ]" />
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              tooltip: '修改',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              tooltip: '删除',
              color: 'error',
              popConfirm: {
                title: '是否确认删除?',
                placement: 'left',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <Loading :loading="compState.loading" :tip="compState.tip" />
@@ -30,161 +35,157 @@
  </div>
</template>
<script lang="ts" setup>
import { reactive, unref } from 'vue';
import { aoaToSheetXlsx } from '/@/components/Excel';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import ProjectDrawer from './ProjectDrawer.vue';
import { useDrawer } from '/@/components/Drawer';
import { columns, searchFormSchema } from './smt_mt_project.data';
import { getListByPage, Save, Delete } from '/@/api/tigerapi/mes/smt/smtmtproject';
import { useGo } from '/@/hooks/web/usePage';
import { Loading } from '/@/components/Loading';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
  import { reactive, unref } from 'vue';
  import { aoaToSheetXlsx } from '/@/components/Excel';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import ProjectDrawer from './ProjectDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { columns, searchFormSchema } from './smt_mt_project.data';
  import { getListByPage, Save, Delete } from '/@/api/tigerapi/mes/smt/smtmtproject';
  import { useGo } from '/@/hooks/web/usePage';
  import { Loading } from '/@/components/Loading';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

const { t } = useI18n();
const { createMessage } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer();
const go = useGo();
const compState = reactive({
  absolute: false,
  loading: false,
  tip: '加载中...',
});
const [registerTable, { getForm, getPaginationRef, reload }] = useTable({
  title: '工具保养项目',
  api: getListByPage,
  columns,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right', //undefined,
  },
  ellipsis: true,
  useSearchForm: true,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
});
let arr: any[] = [];
//导出
function aoaToExcel() {
  const totals = getPaginationRef().total
  if (totals < 30000) {
    arr = [];
    compState.loading = true;
    const col = getForm().getFieldsValue()
    getListByPage(col).then((res) => {
      res.items.forEach(element => {
        var TYPE = ''
        switch (element.TOOL_TYPE) {
          case 0:
            TYPE = '钢网';
            break;
          case 1:
            TYPE = '刮刀';
            break;
          default:
            break;
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const go = useGo();
  const compState = reactive({
    absolute: false,
    loading: false,
    tip: '加载中...',
  });
  const [registerTable, { getForm, getPaginationRef, reload }] = useTable({
    title: '工具保养项目',
    api: getListByPage,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right', //undefined,
    },
    ellipsis: true,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
  });
  let arr: any[] = [];
  //导出
  function aoaToExcel() {
    const totals = getPaginationRef().total;
    if (totals < 30000) {
      arr = [];
      compState.loading = true;
      const col = getForm().getFieldsValue();
      getListByPage(col).then((res) => {
        res.items.forEach((element) => {
          var TYPE = '';
          switch (element.TOOL_TYPE) {
            case 0:
              TYPE = '钢网';
              break;
            case 1:
              TYPE = '刮刀';
              break;
            default:
              break;
          }
          arr.push({
            保养项目编码: element.PROJ_CODE,
            保养项目名称: element.PROJ_NAME,
            类型: TYPE,
            保养项1: element.ITEM01,
            保养项2: element.ITEM02,
            保养项3: element.ITEM03,
            保养项4: element.ITEM04,
            保养项5: element.ITEM05,
            保养项6: element.ITEM06,
            保养项7: element.ITEM07,
            保养项8: element.ITEM08,
            保养项9: element.ITEM09,
            保养项10: element.ITEM10,
            保养项11: element.ITEM11,
            保养项12: element.ITEM12,
            保养项13: element.ITEM13,
            保养项14: element.ITEM14,
            保养项15: element.ITEM15,
            保养项16: element.ITEM16,
            保养项17: element.ITEM17,
            保养项18: element.ITEM18,
            保养项19: element.ITEM19,
            保养项20: element.ITEM20,
            备注: element.REMARK,
            创建人: element.CREATE_USER,
            创建时间: element.CREATE_TIME,
          });
        });
        const arrHeader = columns.map((column) => column.title);
        const arrData = arr.map((item) => {
          return Object.keys(item).map((key) => item[key]);
        });
        // 保证data顺序与header一致
        if (arr.length < 30000) {
          aoaToSheetXlsx({
            data: arrData,
            header: arrHeader,
            filename: '工具保养项目.xlsx',
          });
        } else {
          createMessage.error(t('导出数据不能超过三万条，如需要更多的请联系管理员'));
        }
        arr.push({
          '保养项目编码': element.PROJ_CODE,
          '保养项目名称': element.PROJ_NAME,
          '类型': TYPE,
          '保养项1': element.ITEM01,
          '保养项2': element.ITEM02,
          '保养项3': element.ITEM03,
          '保养项4': element.ITEM04,
          '保养项5': element.ITEM05,
          '保养项6': element.ITEM06,
          '保养项7': element.ITEM07,
          '保养项8': element.ITEM08,
          '保养项9': element.ITEM09,
          '保养项10': element.ITEM10,
          '保养项11': element.ITEM11,
          '保养项12': element.ITEM12,
          '保养项13': element.ITEM13,
          '保养项14': element.ITEM14,
          '保养项15': element.ITEM15,
          '保养项16': element.ITEM16,
          '保养项17': element.ITEM17,
          '保养项18': element.ITEM18,
          '保养项19': element.ITEM19,
          '保养项20': element.ITEM20,
          '备注': element.REMARK,
          '创建人': element.CREATE_USER,
          '创建时间': element.CREATE_TIME,
        });

        compState.loading = false;
      });
      const arrHeader = columns.map((column) => column.title);
      const arrData = arr.map((item) => {
        return Object.keys(item).map((key) => item[key]);
      });
      // 保证data顺序与header一致
      if (arr.length < 30000) {
        aoaToSheetXlsx({
          data: arrData,
          header: arrHeader,
          filename: '工具保养项目.xlsx',
        });
      } else {
        createMessage.error(t('导出数据不能超过三万条，如需要更多的请联系管理员'));
      }

      compState.loading = false;

    })

  } else {
    createMessage.error(t('导出数据不能超过三万条，如需要更多的请联系管理员'));
    } else {
      createMessage.error(t('导出数据不能超过三万条，如需要更多的请联系管理员'));
    }
  }


}
//添加
function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
  });
}
//编辑
function handleEdit(record: any) {
  openDrawer(true, {
    isUpdate: true,
    record
  });
}
function handleSuccess() {
  reload();
}
//报废
function handleBao(record: any) {
  const apiAction = Save(record, unref(true), true);
  apiAction.then((action) => {
    if (action.IsSuccessed) {
      createMessage.success(t('已报废'));
      reload();
    } else {
      createMessage.success(t('报废操作失败'));
    }
  });
}
//删除
function handleDelete(record: any) {
  const apiAction = Delete(record.ID);
  apiAction.then((action) => {
    if (action.IsSuccessed) {
      createMessage.success(t('已删除'));
      reload();
    } else {
      createMessage.success(t('删除操作失败'));
    }
  });
}
  //添加
  function handleAdd() {
    openDrawer(true, {
      isUpdate: false,
    });
  }
  //编辑
  function handleEdit(record: any) {
    openDrawer(true, {
      isUpdate: true,
      record,
    });
  }
  function handleSuccess() {
    reload();
  }
  //报废
  function handleBao(record: any) {
    const apiAction = Save(record, unref(true), true);
    apiAction.then((action) => {
      if (action.IsSuccessed) {
        createMessage.success(t('已报废'));
        reload();
      } else {
        createMessage.success(t('报废操作失败'));
      }
    });
  }
  //删除
  function handleDelete(record: any) {
    const apiAction = Delete(record.ID);
    apiAction.then((action) => {
      if (action.IsSuccessed) {
        createMessage.success(t('已删除'));
        reload();
      } else {
        createMessage.success(t('删除操作失败'));
      }
    });
  }
</script>