lx-MOM-front/src/views/quality/enamellingProcessCheckRecord/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.attr1"
            placeholder="请选择是否合格"
            :options="qualifiedOrNotList"
            :style="{ width: formItemWidth }"
          ></n-select>
        </n-form-item>
        <n-form-item v-show="searchForm.attr1 !== '0'" label="缺陷项">
          <n-select
            v-model:value="searchForm.defectId"
            placeholder="请选择缺陷项"
            :options="defectList"
            :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 label="批号">
          <n-input
            v-model:value="searchForm.orderNumber"
            type="text"
            :style="{ width: formItemWidth }"
            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-date-picker v-model:value="range" type="datetimerange" clearable />
        </n-form-item>
        <n-form-item label="合格">
          <n-input v-model:value="qualified" :disabled="true" :style="{ width: formItemWidth }"></n-input>
        </n-form-item>
        <n-form-item label="不合格">
          <n-input v-model:value="noQualified" :disabled="true" :style="{ width: formItemWidth }"></n-input>
        </n-form-item>
        <n-form-item label="合格率">
          <n-input v-model:value="qualifiedRatio" :disabled="true" :style="{ width: formItemWidth }"></n-input>
        </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, watch } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { getWorkbenchEnamellingList } from '@/service/api/md/workbench/enamelling';
import { dataTableConfig } from '@/config/dataTableConfig';
import { useLoading } from '~/src/hooks';
import { useSearchBtn } from '~/src/hooks/common/useBtn';
import { getQcEnamelProcessRecordList } from '~/src/service/api/quality/enamellingProcessCheckRecord/index';
import { getQcDefect } from '~/src/service/api/quality/qcDefect/index';
const searchForm = ref<enamellingProcessCheckRecord.searchForm>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  generateWorkOrderNumber: '',
  orderNumber: '',
  attr1: null,
  deviceName: null,
  batchNumber: '',
  productSpecifications: '',
  params: {
    beginTime: null,
    endTime: null
  },
  defectId: null
});
const { loading, startLoading, endLoading } = useLoading();
const formItemWidth = ref<string>('180px');
const machineList = ref<{ label: string; value: number }[]>([]);
const defectList = ref<{ label: string; value: number }[]>([]);
const qualified = ref<string>('0');
const noQualified = ref<string>('0');
const qualifiedRatio = ref<string>('0');
const range = ref<[number, number] | null>(null);
import { formatDate } from '~/src/utils/form/rule';
const qualifiedOrNotList = ref<{ label: string; value: string }[]>([
  { label: '合格', value: '0' },
  { label: '不合格', value: '1' }
]);
const machineId = ref<number | null>(null);
const data = ref<enamellingProcessCheckRecord.TableList[]>([]);

const columns: Ref<DataTableColumns<enamellingProcessCheckRecord.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: 'deviceName',
    align: 'center',
    width: 100
  },
  {
    title: '轴号',
    key: 'axisNumber',
    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: 'clientName',
    align: 'center',
    width: 140,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '料号',
    key: 'partNumber',
    align: 'center',
    width: 140,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '批号',
    key: 'batchNumber',
    align: 'center',
    width: 140
  },
  {
    title: '生产工单号',
    key: 'generateWorkOrderNumber',
    align: 'center',
    width: 140,
    ellipsis: {
      tooltip: true
    }
  },
  {
    title: '产品型号',
    key: 'productModel',
    align: 'center',
    width: 100
  },
  {
    title: '产品规格',
    key: 'productSpecifications',
    align: 'center',
    width: 100
  },
  {
    title: '日期',
    key: 'createTime',
    align: 'center',
    width: 180
  },
  {
    title: '质检人',
    key: 'qualityInspector',
    align: 'center',
    width: 100
  },
  {
    title: '是否合格',
    key: 'qualifiedOrNot',
    align: 'center',
    width: 100,
    render: row => <n-tag type={row.attr1 === '0' ? 'success' : 'error'}>{row.attr1 === '0' ? '合格' : '不合格'}</n-tag>
  },
  {
    title: '缺陷项',
    key: '',
    align: 'center',
    width: 180,
    render: row => {
      let defectName = '';
      if (row.qcDefectList) {
        row.qcDefectList.forEach(item => {
          defectName += `${item.defectName},`;
        });
        defectName = defectName.slice(0, -1);
      }
      return defectName;
    }
  }
]);

function search() {
  if (range.value !== null) {
    searchForm.value.params.beginTime = formatDate(new Date(range.value[0]), 'yyyy-MM-dd');
    searchForm.value.params.endTime = formatDate(new Date(range.value[1]), 'yyyy-MM-dd');
  } else {
    searchForm.value.params.beginTime = null;
    searchForm.value.params.endTime = null;
  }
  init();
}
function reset() {
  searchForm.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    generateWorkOrderNumber: '',
    orderNumber: '',
    attr1: null,
    deviceName: null,
    batchNumber: '',
    productSpecifications: '',
    defectId: null,
    params: {
      beginTime: null,
      endTime: null
    }
  };
  range.value = null;
  init();
}

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

  getQcDefect({ defectClassificationId: '3' }).then(res => {
    if (res.code === 200) {
      res.rows.forEach((item: any) => {
        defectList.value.push({
          label: item.defectName,
          value: item.defectId
        });
      });
    }
  });
}

function init() {
  startLoading();
  getQcEnamelProcessRecordList(searchForm.value).then(res => {
    endLoading();
    if (res.code === 200) {
      data.value = res.rows;
      searchForm.value.total = res.total;
      const belowStandard = res.belowStandard || 0;
      qualified.value = (searchForm.value.total - belowStandard).toString();
      noQualified.value = belowStandard;
      if (Number(qualified.value) === 0 || Number(searchForm.value.total) === 0) {
        qualifiedRatio.value = '0%';
        return;
      }
      qualifiedRatio.value = `${((Number(qualified.value) / Number(searchForm.value.total)) * 100).toFixed(2)}%`;
    }
  });
}
watch(
  () => searchForm.value.attr1,
  newValue => {
    if (newValue) searchForm.value.defectId = null;
  }
);
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;
}

:deep(.n-input__input-el) {
  color: black !important;
}
</style>