lx-MOM-front/src/components/moldData/ledgerList.vue

<template>
  <div>
    <my-card title="台账列表">
      <n-data-table
        v-model:checked-row-keys="checkedRowKeys"
        :loading="loading"
        :columns="columns"
        :data="data"
        :row-key="rowKey"
        :max-height="dataTableConfig.maxHeight"
        :scroll-x="dataTableConfig.scrollWidth(columns)"
      ></n-data-table>
      <my-pagination v-model:search-form="searchForm" @init="init"></my-pagination>
    </my-card>
  </div>
</template>

<script setup lang="tsx">
import { ref, watch, h } from 'vue';
import type { Ref } from 'vue';
import { NInputNumber, NInput } from 'naive-ui';
import type { DataTableColumns } from 'naive-ui';
import { dataTableConfig } from '@/config/dataTableConfig';
import { useLoading } from '~/src/hooks';
import { getQueryByClassificationId } from '~/src/service/api/moid/outWarehouse/index';
import { getMoidStatus } from '~/src/utils/common/moidFunc';
const props = withDefaults(
  defineProps<{
    classificationId: number;
    status: string;
  }>(),
  {
    classificationId: -1,
    status: 'OPERATIONAL'
  }
);

const searchForm = ref<{
  pageNum: number;
  pageSize: number;
  total: number;
  classificationId: number | null;
  status: string;
}>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  classificationId: null,
  status: props.status
});
const isAddColumns = ref<boolean>(false);
const isAddTolerance = ref<boolean>(false);
const isAddMoldNum = ref<boolean>(false);
const isAddColumnsMoldCode = ref<boolean>(false);
const { loading, startLoading, endLoading } = useLoading();
const checkedRowKeys = ref<Array<string | number>>([]);
const rowKey = (row: any) => row.moldId;

const data = ref<basicsMessage.TableList[]>([]);

const columns: Ref<DataTableColumns<basicsMessage.TableList>> = ref([
  {
    type: 'selection'
  },
  {
    title: '模具编号',
    key: 'moldCode',
    align: 'center',
    minWidth: 100
  },
  {
    title: '模具类别',
    key: 'moldType',
    align: 'center',
    minWidth: 100
  },
  {
    title: '型号',
    key: 'moldSpec',
    align: 'center',
    minWidth: 100
  },
  {
    title: '模具孔径',
    key: 'moldAperture',
    align: 'center',
    minWidth: 100
  },
  // {
  //   title: '公差',
  //   key: 'engineeringTolerance',
  //   align: 'center',
  //   minWidth: 100
  // },
  {
    title: '数量',
    key: 'moldNum',
    align: 'center',
    minWidth: 100
  },
  {
    title: '材质',
    key: 'moldMaterial',
    align: 'center',
    minWidth: 100
  },
  {
    title: '存放位置',
    key: 'moldArea',
    align: 'center',
    minWidth: 100
  },
  {
    title: '套模名称',
    key: 'moldName',
    align: 'center',
    minWidth: 100
  },
  {
    title: '状态',
    key: 'status',
    align: 'center',
    fixed: 'right',
    minWidth: 100,
    render: row => {
      const obj = getMoidStatus(row.status);
      return <n-tag type={obj.statusType}>{obj.text}</n-tag>;
    }
  }
]);

const getDataIndex = key => {
  return data.value.findIndex(item => item.moldId === key);
};

function changeMoldCode() {
  if (isAddColumnsMoldCode.value) return;
  const addIndex = columns.value.findIndex((item: any) => item.key === 'moldCode');
  columns.value.splice(addIndex + 1, 0, {
    title: '改制后模具编号',
    key: '',
    align: 'center',
    minWidth: 140,
    render(row) {
      const index = getDataIndex(row.moldId);
      return h(NInput, {
        value: row.nowMoldCode,
        onUpdateValue(v) {
          if (v !== null) {
            data.value[index].nowMoldCode = v;
          }
        }
      });
    }
  });
  isAddColumnsMoldCode.value = true;
}

function changeColumns() {
  if (isAddColumns.value) return;
  const addIndex = columns.value.findIndex((item: any) => item.key === 'moldAperture');
  columns.value.splice(addIndex + 1, 0, {
    title: '改制后孔径',
    key: '',
    align: 'center',
    minWidth: 140,
    render(row) {
      const index = getDataIndex(row.moldId);
      return h(NInputNumber, {
        value: row.nowAperture,
        onUpdateValue(v) {
          if (v !== null) {
            data.value[index].nowAperture = v;
          }
        }
      });
    }
  });

  isAddColumns.value = true;
}

function changeColumnsTolerance() {
  if (isAddTolerance.value) return;
  const addIndex = columns.value.findIndex((item: any) => item.key === 'engineeringTolerance');
  columns.value.splice(addIndex + 1, 0, {
    title: '改制后公差',
    key: '',
    align: 'center',
    minWidth: 140,
    render(row) {
      const index = getDataIndex(row.moldId);
      return h(NInputNumber, {
        value: row.updateTolerance,
        onUpdateValue(v) {
          if (v !== null) {
            data.value[index].updateTolerance = v;
          }
        }
      });
    }
  });

  isAddTolerance.value = true;
}

function changeMoldNum() {
  if (isAddMoldNum.value) return;
  const addIndex = columns.value.findIndex((item: any) => item.key === 'moldNum');
  columns.value.splice(addIndex + 1, 0, {
    title: '出库数量',
    key: '',
    align: 'center',
    minWidth: 140,
    render(row) {
      const index = getDataIndex(row.moldId);
      return h(NInputNumber, {
        value: row.updateMoldNum,
        onUpdateValue(v) {
          if (v !== null) {
            data.value[index].updateMoldNum = v;
          }
        }
      });
    }
  });
}

function getData() {
  const list: any = [];
  if (checkedRowKeys.value.length > 0) {
    checkedRowKeys.value.forEach(item => {
      const items = data.value.find(ele => ele.moldId === item);
      if (items) {
        list.push(items);
      }
    });
  }
  return list;
}

defineExpose({
  checkedRowKeys,
  changeColumns,
  getData,
  changeColumnsTolerance,
  changeMoldNum,
  changeMoldCode
});

defineEmits(['cancel', 'submit', 'update:show']);

function init() {
  searchForm.value.classificationId = props.classificationId;
  startLoading();
  getQueryByClassificationId(searchForm.value).then(res => {
    endLoading();
    if (res.code === 200) {
      data.value = res.rows;
      data.value.forEach(item => {
        item.updateMoldNum = 1;
      });
      searchForm.value.total = res.total;
    }
  });
}

watch(
  () => props.classificationId,
  () => {
    init();
  }
);
</script>

<style scoped>
button {
  padding: 0 20px;
}

.btn-box {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
</style>