kd-aiot-frontend-qms/src/views/sample/samplemanagement/components/edit.vue

<!-- 用户编辑弹窗 -->
<template>
  <div class="ele-body">
    <el-card shadow="never">
      <header-title>
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
      </header-title>
      <base-info ref="baseInfoRefs" v-if="baseForm" :form="baseForm" :btnType="btnType"></base-info>
      <ele-pro-table ref="table" :columns="tableColumns" :datasource="datasource" :pageSize="20"
        :pageSizes="[20, 30, 40, 50, 100]">
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
        </template>
        <template v-slot:categoryCode="{ row }">
          <el-link type="primary" :underline="false">
            {{ row.categoryCode }}
          </el-link>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="primary" :underline="false" @click="handleDispose(row, 'dispose')">
            处置
          </el-link>
        </template>
      </ele-pro-table>

      <!--    <template v-slot:footer>-->
      <!--      <el-button @click="handleClose">取消</el-button>-->
      <!--    </template>-->
      <!--  </ele-modal>-->
    </el-card>
    <sampleDisposeDialog ref="disposeRef" @handleDisposeConfirm="handleDisposeConfirm"></sampleDisposeDialog>
  </div>
</template>

<script>
import { getSampleQWorkOrderIdPage, getById, disposeSubmit } from "@/api/samplemanagement";
import baseInfo from './baseInfo.vue';
import { finishPageTab } from "@/utils/page-tab-util";
import sampleDisposeDialog from '@/views/inspectionWork/components/sampleDisposeDialog.vue';

export default {
  components: {
    baseInfo,
    sampleDisposeDialog
  },
  data() {
    const defaultForm = function () {
      return {
      };
    };
    return {
      defaultForm,
      // 表单数据
      baseForm: { ...defaultForm() },
      title: null,
      btnType: null,
      visible: false,
      loading: false,
      qualityWorkOrderId: '',
      qualitySampleList: [],
      tableColumns: [
        { label: '编码', prop: 'categoryCode', width: '150', align: 'center', showOverflowTooltip: true, slot: 'categoryCode' },
        { label: '名称', prop: 'categoryName', width: '150', align: 'center', showOverflowTooltip: true },
        { label: '批次号', prop: 'batchNo', align: 'center', showOverflowTooltip: true },
        { label: '发货条码', prop: 'barcodes', align: 'center', showOverflowTooltip: true },
        { label: '包装编码', prop: 'packageNo', align: 'center', showOverflowTooltip: true },
        { label: '包装数量', prop: 'packingQuantity', align: 'center', showOverflowTooltip: true },
        { label: '包装单位', prop: 'packingUnit', align: 'center', showOverflowTooltip: true },
        { label: '计量数量', prop: 'measureQuantity', align: 'center', showOverflowTooltip: true },
        { label: '计量单位', prop: 'measureUnit', align: 'center', showOverflowTooltip: true },
        { label: '物料代号', prop: 'materielDesignation', align: 'center', showOverflowTooltip: true },
        { label: '客户代号', prop: 'clientCode', align: 'center', showOverflowTooltip: true },
        { label: '刻码', prop: 'engrave', align: 'center', showOverflowTooltip: true },
        { label: '仓库', prop: 'warehouseName', align: 'center', showOverflowTooltip: true },
        { label: '货区', prop: 'areaName', align: 'center', showOverflowTooltip: true },
        { label: '货架', prop: 'goodsShelfName', align: 'center', showOverflowTooltip: true },
        { label: '货位', prop: 'goodsAllocationName', align: 'center', showOverflowTooltip: true },
        { label: '生产日期', prop: 'productionDate', align: 'center', showOverflowTooltip: true },
        { label: '采购日期', prop: 'purchaseDate', align: 'center', showOverflowTooltip: true },
        { label: '重量', prop: 'weight', align: 'center', showOverflowTooltip: true, fixed: 'right' },
        { label: '重量单位', prop: 'weightUnit', align: 'center', showOverflowTooltip: true, fixed: 'right' },
        {
          label: '处置状态', prop: 'disposalStatus', align: 'center', showOverflowTooltip: true, fixed: 'right', formatter: (row, column, cellValue) => {
            return cellValue == 1 ? '返工' : cellValue == 2 ? '返修' : cellValue == 3 ? '报废' : cellValue == 4 ? '降级使用' :
              cellValue == 5 ? '让步接收' : cellValue == 6 ? '留样' : cellValue == 7 ? '消耗' : cellValue == 8 ? '回用' : '';
          }
        },
        { label: '处置时间', prop: 'disposeTime', align: 'center', showOverflowTooltip: true, fixed: 'right' },
        {
          label: '质检状态', prop: 'qualityStatus', align: 'center', showOverflowTooltip: true, fixed: 'right', formatter: (row, column, cellValue) => {
            return cellValue == 0 ? '未检' : cellValue == 1 ? '已检' : cellValue == 2 ? '待检' : '';
          }
        },
        {
          label: '质检结果', prop: 'qualityResults', align: 'center', showOverflowTooltip: true, fixed: 'right', formatter: (row, column, cellValue) => {
            return cellValue == 1 ? '合格' : cellValue == 2 ? '不合格' : '';
          }
        },
        { columnKey: 'action', label: '操作', align: 'center', width: 120, resizable: false, slot: 'action', fixed: 'right' }
      ],
      tableData: []
    };
  },
  computed: {
  },
  watch: {
  },

  created() {
    if (this.$route.query.id) {
      this.getDetail();
    }
  },
  methods: {
    async datasource({ page, where, limit }) {
      where.qualityWorkOrderId = this.$route.query.qualityWorkOrderId;
      const arr = await getSampleQWorkOrderIdPage({
        ...where,
        pageNum: page,
        size: limit
      });
      this.tableData = arr.list;
      console.log(arr, 'arr')
      return arr.list;
    },
    async getDetail() {
      this.visible = true;
      this.qualityWorkOrderId = this.$route.query.qualityWorkOrderId;
      getById(this.$route.query.id).then(res => {
        this.btnType = this.$route.query.type;
        console.log(res, 'res.data');
        this.baseForm = res.data;
      });
    },
    async open(type, row) {
      this.btnType = type;
      this.title = type == 'add' ? '新增' : type == 'edit' ? '编辑' : '详情';
      if (this.btnType != 'add') {
        this.qualityWorkOrderId = row.qualityWorkOrderId;
        this.baseForm = JSON.parse(JSON.stringify(row));
      }
      this.visible = true;
    },
    resetForm() {
      this.baseForm = { ...this.defaultForm() };
    },
    handleClose() {
      this.resetForm();
      // this.resetTable();
      this.visible = false;
    },
    cancel() {
      finishPageTab();
      this.$router.go(-1);
    },
    async submit() {
      console.log(this.tableData, '表格');

      for (let i = 0; i < this.tableData.length; i++) {
        const disposalStatus = this.tableData[i].disposalStatus;
        const disposeTime = this.tableData[i].disposeTime;
        const qualityStatus = this.tableData[i].qualityStatus;
        if (disposalStatus == null || disposeTime == null) {
          this.$message.error('请完善处置状态和处置时间！')
          this.loading = false;
          return
        }
        if (qualityStatus == '2') {
          this.$message.error('请完善质检状态！')
          this.loading = false;
          return
        }
      }
      this.loading = true;
      let pData = {
        ...form,
        qualitySampleUpdatePOList: this.tableData,
      }
      disposeSubmit(pData)
        .then((msg) => {
          this.loading = false;
          this.$message.success(msg);
          this.cancel();
          this.$emit('done');
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    handleDispose(row, type) {

      row.sampleDate = this.getNowTimes();

      row.disposeTime = this.getNowTimes();

      console.log(null, row, type, this.$route.query.qualityType)

      this.$refs.disposeRef.openDispose(null, row, type, this.$route.query.qualityType);
    },
    // 处理确认事件
    handleDisposeConfirm(row, index) {
      console.log(row, index, '处置确认');
    },
    getNowDate() {
      let date = new Date(),
        obj = {
          year: date.getFullYear(), //获取当前月份(0-11,0代表1月)
          month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
          strDate: date.getDate(), // 获取当前日(1-31)
          hour: date.getHours(), //获取当前小时(0 ~ 23)
          minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
          second: date.getSeconds() //获取当前秒数(0 ~ 59)
        };
      Object.keys(obj).forEach((key) => {
        if (obj[key] < 10) obj[key] = `0${obj[key]}`;
      });
      return obj;
    },
    getNowTime() {
      const nowDate = this.getNowDate()
      return nowDate.year + '-' + nowDate.month + '-' + nowDate.strDate + ' ' + nowDate.hour + ':' + nowDate.minute + ':' + nowDate.second
    },
    getNowTimes() {
      const nowDate = this.getNowDate()
      return nowDate.year + '-' + nowDate.month + '-' + nowDate.strDate
    },
  }
};
</script>

<style lang="scss" scoped>
.location-warp {
  display: flex;

  .detail {
    margin-left: 10px;
  }
}

:deep(.el-form-item__content .el-input-group__prepend) {
  background-color: #fff;
}

:deep(.el-dialog:not(.ele-dialog-form) .el-dialog__body .el-form .el-form-item:last-child) {
  margin-bottom: 22px;
}

.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.el-pagination {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-top: none;
}
</style>