lx-MOM-front/src/views/quality/drawingProcessCheckRecord/index.vue

<template>
  <div>
    <my-card title="搜索条件" search>
      <n-form inline>
        <n-form-item label="生产工单">
          <n-input
            v-model:value="searchForm.generateWorkOrderNumber"
            :style="{ width: formItemWidth }"
            type="text"
            placeholder="请输入生产工单"
          />
        </n-form-item>
        <n-form-item label="订单编号">
          <n-input
            v-model:value="searchForm.orderNumber"
            type="text"
            :style="{ width: formItemWidth }"
            placeholder="请输入订单编号"
          />
        </n-form-item>
        <n-form-item label="是否合格">
          <n-select
            v-model:value="searchForm.qualifiedOrNot"
            placeholder="请选择是否合格"
            :options="qualifiedOrNotList"
            :style="{ width: formItemWidth }"
          ></n-select>
        </n-form-item>
        <n-form-item label="机台">
          <n-select
            v-model:value="machineId"
            placeholder="请选择机台"
            :options="machineList"
            :style="{ width: formItemWidth }"
            @update-value="(val,item : any) => {
              searchForm.deviceName = item.label
            }"
          ></n-select>
        </n-form-item>
        <n-form-item>
          <component :is="useSearchBtn(search, reset)"></component>
        </n-form-item>
      </n-form>
    </my-card>
    <my-card title="拉丝过程检列表">
      <template #right>
        <div>
          <CxColumns v-model:columns="columns" />
        </div>
      </template>
      <n-data-table
        :loading="loading"
        :columns="columns"
        :data="data"
        :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 type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { getWorkbenchWiredrawingList } from '@/service/api/md/workbench/wiredrawing';
import { dataTableConfig } from '@/config/dataTableConfig';
import { useLoading } from '~/src/hooks';
import { useSearchBtn } from '~/src/hooks/common/useBtn';
import { getQcWireDrawingRecordList } from '~/src/service/api/quality/drawingProcessCheckRecord/index';
const searchForm = ref<drawingProcessCheckRecord.searchForm>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  generateWorkOrderNumber: '',
  orderNumber: '',
  qualifiedOrNot: null,
  deviceName: null
});
const { loading, startLoading, endLoading } = useLoading();
const formItemWidth = ref<string>('180px');
const machineList = ref<{ label: string; value: number }[]>([]);
const qualifiedOrNotList = ref<{ label: string; value: string }[]>([
  { label: '合格', value: '0' },
  { label: '不合格', value: '1' }
]);
const machineId = ref<number | null>(null);
const data = ref<drawingProcessCheckRecord.TableList[]>([]);

const columns: Ref<DataTableColumns<drawingProcessCheckRecord.TableList>> = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    width: 70,
    render: (_row, index) => (searchForm.value.pageNum - 1) * searchForm.value.pageSize + index + 1
  },
  // {
  //   title: '工单类型',
  //   key: 'workOrdeType',
  //   align: 'center',
  //   width: 100,
  //   render: row => {
  //     return row.workOrdeType === '0' ? '板材' : '金属';
  //   }
  // },
  {
    title: '检测项',
    key: 'attr1',
    align: 'center',
    width: 180
  },
  {
    title: '质检人',
    key: 'qualityInspector',
    align: 'center',
    width: 100
  },
  {
    title: '是否合格',
    key: 'qualifiedOrNot',
    align: 'center',
    width: 100,
    render: row => (
      <n-tag type={row.qualifiedOrNot === '0' ? 'success' : 'error'}>
        {row.qualifiedOrNot === '0' ? '合格' : '不合格'}
      </n-tag>
    )
  },
  {
    title: '缺陷项',
    key: '',
    align: 'center',
    width: 180,
    ellipsis: {
      tooltip: true
    },
    render: row => {
      let defectName = '';
      if (row.qcDefectList) {
        row.qcDefectList.forEach(item => {
          defectName += `${item.defectName},`;
        });
        defectName = defectName.slice(0, -1);
      }
      return defectName;
    }
  },
  {
    title: '机台',
    key: 'deviceName',
    align: 'center',
    width: 100
  },
  {
    title: '订单类型',
    key: 'orderType',
    width: 100,
    render: row => {
      return row.orderType === '0' ? '客户订单' : '备库订单';
    }
  },
  {
    title: '订单编号',
    key: 'orderNumber',
    align: 'center',
    width: 140,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '生产工单号',
    key: 'generateWorkOrderNumber',
    align: 'center',
    width: 180,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '产品规格',
    key: 'productSpecifications',
    align: 'center',
    width: 160
  },
  // {
  //   title: '数量',
  //   key: 'weight',
  //   align: 'center',
  //   width: 100
  // },
  {
    title: '单位',
    key: 'measure',
    align: 'center',
    width: 100
  },
  {
    title: '批号',
    key: 'batchNumber',
    align: 'center',
    width: 180
  },
  {
    title: '日期',
    key: 'createTime',
    align: 'center',
    width: 180
  }
]);

function search() {
  init();
}
function reset() {
  searchForm.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    generateWorkOrderNumber: '',
    orderNumber: '',
    qualifiedOrNot: null,
    deviceName: null
  };
  init();
}

function getList() {
  getWorkbenchWiredrawingList({ pageSize: 999 }).then(res => {
    if (res.code === 200) {
      res.rows.forEach((item: any) => {
        machineList.value.push({
          label: item.equipmentCode,
          value: item.id
        });
      });
    }
  });
}

function init() {
  startLoading();
  getQcWireDrawingRecordList(searchForm.value).then(res => {
    endLoading();
    if (res.code === 200) {
      data.value = res.rows;
      searchForm.value.total = res.total;
    }
  });
}
onMounted(() => {
  init();
  getList();
});
</script>

<style scoped>
:deep(.n-data-table-td) {
  text-align: center;
}
:deep(.n-space) {
  justify-content: center !important;
}

:deep(.n-data-table .n-data-table-th .n-data-table-th__title-wrapper) {
  text-align: center;
}
</style>