上片模块根据状态筛选调整位置加在表格中，前端做筛选并控制根据条件显示数据

wangfei

2025-02-17 ef3f5053b950475b84f46d578b2e2b54482cd3a4

上片模块根据状态筛选调整位置加在表格中，前端做筛选并控制根据条件显示数据

 UI-Project/src/views/Returns/upreturns.vue

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref, computed} from "vue";
import {useRouter} from "vue-router"
import { ElMessage, ElMessageBox } from 'element-plus'
import {useI18n} from 'vue-i18n'
@@ -26,7 +26,24 @@
const cuttingMachineStatusColor = ref('#911005');
const tableDataa = ref<any[]>([]);
const tableDatab = ref<any[]>([]);
const tableData = ref([])
// const tableData = ref([])
const tableData = reactive([]);
const filteredData = computed(() => {
  // applyFilters 函数应该在某处定义，用于根据当前筛选条件过滤数据
  return applyFilters(tableData, currentFilters);
});
// 当前筛选条件，应该是一个响应式变量，用于存储用户选择的筛选值
const currentFilters = ref<{ state?: string }>({});
const filterTag = (value: string, row: any) => {
  // return String(row.state) === value;
  return row.state === value
};
// 应用筛选条件的函数
const applyFilters = (data: any[], filters: { state?: string }) => {
  return data.filter(row => {
    return (!filters.state || String(row.state) === filters.state);
  });
};
const titleSelectJson = ref({
  engineerId: [],
})
@@ -63,6 +80,7 @@
     window.localStorage.setItem('engineeringIda', tableData[0].engineeringId)
}
  } catch (error) {
    ElMessage.error(response.message);
  }
};
let socket = null;
@@ -70,7 +88,8 @@
const handleMessage = (data: any) => {
  tableDataa.value = data.list[0].slice(0, 2);
  if(data.loadTask1.length !=0){
  tableData.value = data.loadTask1[0]
  // tableData.value = data.loadTask1[0]
  tableData.splice(0, tableData.length, ...data.loadTask1[0]);
  window.localStorage.setItem('engineeringIda', tableData.value[0].engineeringId)
  canSelectProjecta.value = false;
  canSelectProjectb.value = false;
@@ -389,17 +408,6 @@
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" @click="handleBinda">{{ $t('basicData.stop') }}</el-button>
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="danger" @click="handledelete">{{ $t('searchOrder.deleteTask') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button>
    <el-select disabled v-model="selectValuesa[1]" clearable :placeholder="$t('Mounting.oneloadingline')"
               style="margin-top: 5px;margin-left: 20px;">
      <el-option :label="$t('Mounting.all')" value="0"></el-option>
      <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option>
      <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option>
    </el-select>
    <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')" style="margin-top: 5px;margin-left: 20px;" >
      <el-option :label="$t('Mounting.waiting')" value="0"></el-option>
      <el-option :label="$t('Mounting.pass')" value="100"></el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('Mounting.setparameters') }}</el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table
@@ -418,21 +426,28 @@
              <span>{{ 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              :label="$t('Mounting.state')"
            min-width="80"
            prop="state"
          >
          <template #default="scope">
            <el-tag
      <el-table-column
      align="center"
      prop="state"
      :label="$t('Mounting.state')"
      min-width="80"
      :filters="[
        { text: t('Mounting.pass'), value: 100 },
        { text: t('Mounting.waiting'), value: 0 },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
                :type="scope.row.state === 100 ? 'success' : 'warning'"
                @click="toggleEnableState(scope.row)"
                disable-transitions
            >
              {{ scope.row.state === 100 ? $t('Mounting.pass') : $t('Mounting.waiting') }}
            </el-tag>
          </template>
      </el-table-column>
      </template>
    </el-table-column>
        </el-table>
      </div>
    </el-card>

 UI-Project/src/views/Returns/upreturns2.vue

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from "vue";
import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref, computed} from "vue";
import {useRouter} from "vue-router"
import { ElMessage, ElMessageBox } from 'element-plus'
import {useI18n} from 'vue-i18n'
@@ -26,7 +26,24 @@
const cuttingMachineStatusColor = ref('#911005');
const tableDataa = ref<any[]>([]);
const tableDatab = ref<any[]>([]);
const tableData = ref([])
// const tableData = ref([])
const tableData = reactive([]);
const filteredData = computed(() => {
  // applyFilters 函数应该在某处定义，用于根据当前筛选条件过滤数据
  return applyFilters(tableData, currentFilters);
});
// 当前筛选条件，应该是一个响应式变量，用于存储用户选择的筛选值
const currentFilters = ref<{ state?: string }>({});
const filterTag = (value: string, row: any) => {
  // return String(row.state) === value;
  return row.state === value
};
// 应用筛选条件的函数
const applyFilters = (data: any[], filters: { state?: string }) => {
  return data.filter(row => {
    return (!filters.state || String(row.state) === filters.state);
  });
};
const titleSelectJson = ref({
  engineerId: [],
})
@@ -70,7 +87,8 @@
const handleMessage = (data: any) => {
  tableDataa.value = data.list[0].slice(2, 4);
  if(data.loadTask2.length !=0){
  tableData.value = data.loadTask2[0]
  tableData.splice(0, tableData.length, ...data.loadTask1[0]);
  // tableData.value = data.loadTask2[0]
  window.localStorage.setItem('engineeringIda', tableData.value[0].engineeringId)
  canSelectProjecta.value = false;
  canSelectProjectb.value = false;
@@ -395,18 +413,6 @@
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" @click="handleBinda">{{ $t('basicData.stop') }}</el-button>
    <el-button :disabled="!canSelectProjectc" style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="danger" @click="handledelete">{{ $t('searchOrder.deleteTask') }}</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button>
    <el-select disabled v-model="selectValuesa[1]" clearable :placeholder="$t('Mounting.twoloadingline')"
               style="margin-top: 5px;margin-left: 20px;">
      <el-option :label="$t('Mounting.all')" value="0"></el-option>
      <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option>
      <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option>
    </el-select>
    <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')" style="margin-top: 5px;margin-left: 20px;" >
      <el-option :label="$t('Mounting.waiting')" value="1"></el-option>
      <el-option :label="$t('film.execution')" value="2"></el-option>
      <el-option :label="$t('film.finish')" value="3"></el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('Mounting.setparameters') }}</el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table
@@ -426,20 +432,27 @@
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              :label="$t('Mounting.state')"
            min-width="80"
            prop="state"
          >
          <template #default="scope">
            <el-tag
      align="center"
      prop="state"
      :label="$t('Mounting.state')"
      min-width="80"
      :filters="[
        { text: t('Mounting.pass'), value: 100 },
        { text: t('Mounting.waiting'), value: 0 },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
                :type="scope.row.state === 100 ? 'success' : 'warning'"
                @click="toggleEnableState(scope.row)"
                disable-transitions
            >
              {{ scope.row.state === 100 ? $t('Mounting.pass') : $t('Mounting.waiting') }}
            </el-tag>
          </template>
      </el-table-column>
      </template>
    </el-table-column>
        </el-table>
      </div>
    </el-card>