mes-zs-admin-backend-ui/src/view/performance/QualityAssessment/patternList.vue

<template>
  <div>
    <div class="gva-table-box">
      <el-form :inline="true" style="padding: 20px;">
        <!-- 店铺下拉 -->
        <el-form-item label="选择店铺">
          <el-select v-model="shopValue" placeholder="请选择店铺" clearable style="width: 180px;">
            <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <!-- SKC输入 -->
        <el-form-item label="SKC编码">
          <el-input v-model="searchInfo" placeholder="请输入SKC编码" clearable style="width: 180px;" />
        </el-form-item>

        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        style="width: 100%; height: 65vh"
        :row-style="{ height: '20px' }"
        :header-cell-style="{ padding: '0px' }"
        :cell-style="{ padding: '0px' }"
        :header-row-style="{ height: '20px' }"
        border
        tooltip-effect="dark"
        :data="tableData"
        row-key="ID"
        highlight-current-row="true"
        :cell-class-name="tableDataCellClass"
        @row-click="Clickonthetable"
        @row-dblclick="Doubleclickonthetable"
        @selection-change="cjsSelectionChange"
        :show-overflow-tooltip="true"
      >
        <el-table-column align="center" type="selection" width="30" />
        <el-table-column align="left" sortable label="订单编号" prop="订单编号" width="105" />
      </el-table>

      <!-- 分页 -->
      <div class="gva-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import {PatternApi} from '@/api/mes/job'
defineOptions({ name: '06PackingDocuments' })

// 用户信息
const userStore = useUserStore()
const _username = ref(`${userStore.userInfo.userName}/${userStore.userInfo.nickName}`)
console.log('用户名称：', _username.value)

// 当前日期
const today = new Date()
const year = today.getFullYear()
const month = String(today.getMonth() + 1).padStart(2, '0')
const day = String(today.getDate()).padStart(2, '0')
const hours = String(today.getHours()).padStart(2, '0')
const minutes = String(today.getMinutes()).padStart(2, '0')
const seconds = String(today.getSeconds()).padStart(2, '0')
const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
const currentDates = `${year}-${month}-${day}`

// 下拉框
const shopValue = ref('')
const shopOptions = ref([
  { label: 'hengda xiaodian', value: '634418222212751' },
  { label: 'LuxePanels', value: 'LuxePanels' }
])

// 搜索框
const searchInfo = ref('')

// 表格数据
const tableData = reactive([])

// 分页
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)

// 查询逻辑
const onSubmit = async () => {
  console.log('查询触发：')
  console.log('店铺：', shopValue.value)
  console.log('SKC：', searchInfo.value)
  
  const res = await PatternApi({ pattern_id: shopValue.value });
  console.log(res)
}

// 表格交互
const Clickonthetable = (row) => {
  console.log('点击行：', row)
}
const Doubleclickonthetable = (row) => {
  console.log('双击行：', row)
}
const cjsSelectionChange = (row) => {
  console.log('选择变更：', row)
}
const tableDataCellClass = () => {
  return ''
}

// 分页事件
const handleCurrentChange = (val) => {
  page.value = val
}
const handleSizeChange = (val) => {
  pageSize.value = val
}
</script>

<style scoped>
:deep(.el-table__body .warning-row) {
  background: #FFFF80 !important;
}
:deep(.el-table__body tr.current-row)>td {
  background: #ff80ff !important;
}
:deep(.el-table .bg-yellow) {
  background: yellow;
}
:deep(.el-table td .cell) {
  line-height: 25px !important;
}
:deep(.el-tabs__header) {
  margin-bottom: 0;
}
.search {
  margin-left: 0px !important;
  margin-right: 10px !important;
}
.bt {
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
.el-tabs__header {
  margin: 0px !important;
}
.gva-table-box {
  padding: 0px !important;
}
.mab {
  margin-bottom: 5px;
}
</style>