kd-aiot-frontend-wt/src/views/boss/orderTracking/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="filter-container">
        <el-form
          label-width="100px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="订单编号：" prop="orderNo">
                <el-input v-model="params.orderNo" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="项目名称：" prop="projectName">
                <el-input v-model="params.projectName" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="客户名称：" prop="customerName">
                <el-input v-model="params.customerName" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
              <el-form-item label="创建时间：" prop="createTime">
                <el-date-picker
                  v-model="timeSearch"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 4, md: 24 } : { span: 4 }">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload('search')"
                >
                  查询
                </el-button>
                <el-button @click="reload('reset')">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <div class="ele-table-container" style="height: 100%">
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :pageSizes="[10, 20, 50, 100]"
        :pageSize="20"
        height="calc(100% - 80px)"
        :key="tableKey"
      >
        <template v-slot:firstProcessDeliveryTime="{ row }">
          <el-date-picker
            v-if="!row.isEdit && !row.firstProcessDeliveryTime"
            v-model="firstTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="handleDateChange($event, row)"
          >
          </el-date-picker>

          <span> {{ row.firstProcessDeliveryTime || '请选择' }}</span>

          <i
            v-if="!row.firstProcessDeliveryTime"
            class="xiada el-icon-edit"
            @click="editFirstTime(row)"
          ></i>
        </template>

        <template v-slot:produceRoutingName="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="produceRouting(row)"
          >
            {{ row.produceRoutingName }}</el-link
          >
        </template>

        <!-- 材料完成 -->

        <!-- 出库 -->

        <template v-slot:deliveryRecords="{ row }">
          <div v-if="row.deliveryStatus === 0" class="delivery-status">
            <span> 未发货 </span>
            <span> 数量：{{ row.productQuantity }} </span>
          </div>

          <div v-if="row.deliveryStatus === 1" class="delivery-status">
            <span> 已发：{{ row.deliveryQuantity }} </span>
            <span>
              未发：{{ row.productQuantity - row.deliveryQuantity }}
            </span>
          </div>

          <div v-if="row.deliveryStatus === 2" class="delivery-status">
            <span> 全部发货 </span>
            <span> 数量:{{ row.deliveryQuantity }} </span>
          </div>
        </template>
      </ele-pro-table>
    </div>

    <produceRouting ref="produceRouting"></produceRouting>
  </div>
</template>
<script>
  import { h } from 'vue';
  import produceRouting from './components/produceRouting.vue';
  import {
    getList,
    getListPage,
    updateFirstProcessDeliveryTime,
    getProduceRoutingDetail
  } from '@/api/boss/index.js';
  import { mapGetters } from 'vuex';
  import { getColumns } from './columns.js';
  import datasss from './data.js';
  import { getRecords } from '@/utils/util';

  import { getByCode } from '@/api/system/dictionary-data';

  export default {
    components: {
      produceRouting
    },
    data() {
      return {
        tableKey: '',
        datasss: datasss,
        timeSearch: null,
        params: {
          startDate: '',
          endDate: '',
          customerId: '',
          projectId: '',
          orderNo: '',
          customerName: '',
          projectName: ''
        },
        columns: [],
        orderObj: {
          0: '未提交',
          1: '审核中',
          2: '已审核',
          3: '审核未通过',
          7: '作废'
        },
        statusObj: {
          0: '未发货',
          1: '部分发货',
          2: '全部发货'
        },

        firstTime: '',
        records: []
      };
    },
    computed: {
      ...mapGetters(['user']),
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },

    methods: {
      reload(type) {
        if (this.timeSearch) {
          this.params.startDate = this.timeSearch[0];
          this.params.endDate = this.timeSearch[1];
        }
        if (type == 'reset') {
          this.params = {
            startDate: '',
            endDate: '',
            customerId: '',
            projectId: '',
            orderNo: ''
          };
        }
        this.$refs.table.reload({ page: 1, where: this.params });
      },
      datasource({ page, where, limit, ...row }) {
        return getListPage({
          ...where,
          pageNum: page,
          size: limit
        });
      },

      editFirstTime(row) {
        row.isEdit = !row.isEdit;
      },
      //   选择首工序的时间
      async handleDateChange(e, item) {
        await updateFirstProcessDeliveryTime({
          id: item.saleOrderMaterialId,
          processDeliveryTime: e
        });
        this.$refs.table.reload({ where: this.params });
      },

      //打开工艺路线详情
      async produceRouting(row) {
        const res = await getProduceRoutingDetail({
          isDetail: false,
          pageNum: 1,
          size: -1,
          routingId: row.produceRoutingId
        });

        this.$refs.produceRouting.open({
          row: row,
          process: res
        });
      }
    },

    mounted() {
      this.$store.dispatch('theme/setBodyFullscreen', true);
    },
    beforeDestroy() {
      this.$store.dispatch('theme/setBodyFullscreen', false);
    },
    async created() {
      const res1 = await getByCode('production_status');
      this.productionStatus = res1.data;
      this.columns = getColumns(this);
    },
    beforeUpdate() {
      console.log('更新');
    }
  };
</script>
<style lang="scss" scoped>
  .app-container {
    background: #f0f3f3;
    min-height: calc(100vh - 84px);
  }

  .zw-page-table {
    background: #ffffff;
    padding-top: 20px;
  }

  .pagination-wrap {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
  }

  .table {
    width: 100%;
    margin-top: 10px;
  }
  .outline {
    width: 100%;
    // min-width: 1px;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    // display: flex;
    // align-items: center;
  }
  .outlineBox .outline:last-child {
    border-bottom: none;
  }

  .xiada {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .records {
    display: flex;
  }

  //
  :deep(.spanbox) {
    display: flex;
    flex-wrap: wrap;
  }

  :deep(.span) {
    flex: 1;
  }

  .flex-col {
    display: flex;
    flex-direction: column;
    .col {
      flex: 1;
      align-content: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  :deep(.el-card__body) {
    padding: 15px 15px 0 15px;
  }

  .ele-body {
    height: calc(100vh - 95px);

    .ele-table-container {
      height: 100%;
      :deep(.el-card__body) {
        padding: 0.3vw;
      }

      :deep(.ele-table-tool-default) {
        padding: 0 15px;
      }

      :deep(.has-gutter) {
        height: 50px;
      }

      :deep(.el-table__header) {
        height: 50px;
        // background-color: #615fe7;
      }

      :deep(.ele-pro-table) {
        height: 99%;
      }
      :deep(.el-table) {
        // font-size: 0.62vw;
      }
    }
  }

  .delivery-status {
    display: flex;
    justify-content: space-around;
  }
</style>