新建模板

charles

2024-04-25 87e09f7443e20b8ba0b0c679cc75eb6bb3539c07

新建模板

 .eslintrc.cjs

@@ -12,5 +12,7 @@
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {}
  rules: {
  'vue/no-mutating-props': 0
  }
}

 src/api/index.ts

@@ -340,3 +340,79 @@
    data: params
  })
}

type basicType = number | null | string | undefined
export interface qualityProcedureParams {
  projectId: basicType
  workOrderId: basicType
  status: basicType
  page: number
  pageSize: number
}

/*
 *  获取质检工序
 * */
export function getQualityProcedureApi(params: qualityProcedureParams) {
  return request({
    url: '/api-s/v1/app/getQualityProcedure',
    method: 'post',
    data: params
  })
}
export interface IPage {
  page: number
  pageSize: number
}
/**
 * 获取所有的项目
 * */
export function getProjectApi(params: IPage) {
  return request({
    url: '/api-s/v1/project/projectList',
    method: 'post',
    data: params
  })
}
/**
 * 根据项目获取所有产品
 * */
export interface IProduct {
  page: number
  pageSize: number
  projectId: string
}
export function getProductApi(params: IProduct) {
  return request({
    url: '/api-s/v1/app/getProductListByProject',
    method: 'post',
    data: params
  })
}
/**
 * 获取加工人员列表
 * */
export function getWorkerApi(params: IPage) {
  return request({
    url: 'api-s/v1/worker/getWorkerList',
    method: 'post',
    data: params
  })
}

export interface IUpdateQualityProcedureParams {
  id: number
  passAmount: number
  scrappedAmount: number
  workerName: string
}
/**
 * 更新工序质检数据
 * */
export function updateQualityProcedureApi(params: IUpdateQualityProcedureParams) {
  return request({
    url: '/api-s/v1/app/updateQualityProcedure',
    method: 'post',
    data: params
  })
}

 src/assets/images/u819.png

 src/assets/images/u820.png

 src/assets/images/u825.png

 src/assets/images/u831.png

 src/assets/images/u837.png

 src/assets/images/u883.png

 src/components.d.ts

@@ -13,30 +13,18 @@
    DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElEmpty: typeof import('element-plus/es')['ElEmpty']
    ElForm: typeof import('element-plus/es')['ElForm']
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElProgress: typeof import('element-plus/es')['ElProgress']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElStep: typeof import('element-plus/es')['ElStep']
    ElSteps: typeof import('element-plus/es')['ElSteps']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElText: typeof import('element-plus/es')['ElText']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
  export interface ComponentCustomProperties {
    vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']
  }
}

 src/router/index.ts

@@ -1,7 +1,7 @@
import { createRouter, createWebHistory } from 'vue-router'
import DashboardView from '../views/dashboard/index.vue'
//import DashboardView from '../views/dashboard/index.vue'
import loginView from '../views/login/loginView.vue'

import DashboardView from '../views/newDashboard/index.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [

 src/views/newDashboard/components/EditInspection.vue

New file
@@ -0,0 +1,89 @@
<script setup lang="ts">
import CommonModal from '@/components/CommonModal.vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { ElMessage } from 'element-plus'
import { defineProps, defineEmits, computed } from 'vue'
const props = defineProps({
  modalObj: { type: Object, default: () => ({}) },
  lookQuality: { type: Object, default: () => ({}) },
  oldLookQuality: { type: Object, default: () => ({}) },
  workerList: { type: Array, default: () => [] }
})
const emit = defineEmits(['editInspection'])
const editInspection = () => {
  if (!props.lookQuality.workerName) {
    ElMessage.warning('加工人员不能为空...')
    return
  }
  if (JSON.stringify(props.lookQuality) === JSON.stringify(props.oldLookQuality)) {
    ElMessage.warning('无法修改与原数据一样的数据')
  } else {
    const params = {
      id: props.lookQuality.id,
      passAmount: passAmountComputed.value,
      scrappedAmount: props.lookQuality.scrappedAmount,
      workerName: props.lookQuality.workerName
    }
    emit('editInspection', params)
  }
}
const passAmountComputed = computed(() => {
  return props.lookQuality.transferAmount - props.lookQuality.scrappedAmount
})
</script>

<template>
  <CommonModal :model-value="modalObj.modalValue" @close="modalObj.modalValue = false">
    <template #title>质检</template>
    <template #default>
      <el-form ref="refForm" style="max-width: 60%; margin: 0px auto" label-width="auto" class="demo-ruleForm">
        <el-form-item label="加工人员：">
          <el-select v-model="lookQuality.workerName" size="large" placeholder="请选择加工人员">
            <el-option v-for="work in workerList" :key="work.id" :label="work.name" :value="work.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="报废数量：">
          <el-input-number
            v-model="lookQuality.scrappedAmount"
            size="large"
            :min="0"
            :max="lookQuality.transferAmount"
            :step="1"
            placeholder="请输入报废数量"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="合格数量：">
          <el-input size="large" :value="passAmountComputed" class="input" placeholder="请输入合格数量" disabled />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="btn">
        <BigButton class="left-btn" bg-color="#4765c0" @click="modalObj.modalValue = false">取消</BigButton>
        <BigButton @click="editInspection">保存</BigButton>
      </div>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.btn {
  margin: 0px auto;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  .left-btn {
    position: relative;
    left: -40px;
  }
}
:deep(.el-select__wrapper) {
  text-align: center;
}
.input {
  :deep(.el-input__inner) {
    text-align: center !important;
  }
}
</style>

 src/views/newDashboard/index.vue

New file
@@ -0,0 +1,395 @@
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
import { getQualityProcedureApi, getProjectApi, getProductApi, getWorkerApi, updateQualityProcedureApi } from '@/api'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import EditInspection from '@/views/newDashboard/components/EditInspection.vue'
defineOptions({
  name: 'NewDashboardView'
})
const taskTabsList = [
  { label: '待质检', value: 1 },
  { label: '已质检', value: 3 }
]
const activeTaskTab = ref(1)
const projectList = ref([])
const productList = ref([])
const projectIdArray = ref([])
const productIdArray = ref([])
const workerList = ref([])
const pageData = ref({ page: 1, pageSize: 1000 })
const modalObj = ref({ modalValue: false })
const qualityList = ref([])
const lookQuality = ref({})
const oldLookQuality = ref({})
const tableHeaderColor = ({ rowIndex }: any) => {
  if (rowIndex === 0) {
    return 'header-row-class' // 这个类名需要你自己定义
  }
}
const changeTab = (tabObj: any) => {
  console.log(tabObj)
}
const checkProduct = (quality: any) => {
  lookQuality.value = { ...quality }
  oldLookQuality.value = { ...quality }
  modalObj.value.modalValue = true
}
const editInspection = (quality: any) => {
  updateQualityProcedureApi(quality).then(({ code, data }: any) => {
    if (code == 200) {
      ElMessage.success(data)
      queryQualityProcedure()
      modalObj.value.modalValue = false
    } else {
      ElMessage.error(data)
    }
  })
}
//1.查询项目列表
const queryProject = () => {
  getProjectApi(pageData.value).then(({ code, data }: any) => {
    if (code == 200) {
      projectList.value = data
    }
  })
}
//2.根据项目编号查询产品列表
const queryProduct = () => {
  if (projectIdArray.value && projectIdArray.value.length > 0) {
    getProductApi({ projectId: projectIdArray.value[0], ...pageData.value }).then(({ code, data }) => {
      if (code == 200) {
        productList.value = data
      }
    })
  } else {
    productList.value = []
    productIdArray.value = []
  }
}
//3.查询工序质检列表
const queryQualityProcedure = () => {
  const params = { status: activeTaskTab.value, projectId: '', productId: '', ...pageData.value, keyword: '' }
  if (Array.isArray(projectIdArray.value) && projectIdArray.value.length > 0) {
    params.projectId = projectIdArray.value[0] + ''
  }
  if (Array.isArray(productIdArray.value) && productIdArray.value.length > 0) {
    params.productId = productIdArray.value[0] + ''
  }
  getQualityProcedureApi(params).then(({ code, data }: any) => {
    if (code == 200) {
      qualityList.value = data
    }
  })
}
//4. 条件变化更新工序质检列表数据
watch(
  [() => activeTaskTab.value, () => productIdArray.value, () => projectIdArray.value],
  () => {
    queryQualityProcedure()
  },
  { immediate: false }
)
//5. 查询所有加工人员列表
const queryWorker = () => {
  getWorkerApi(pageData.value).then(({ code, data }: any) => {
    if (code == 200) {
      workerList.value = data
    }
  })
}
//6.初始化页面数据
const initPage = () => {
  queryProject()
  queryQualityProcedure()
  queryWorker()
}
onMounted(() => {
  initPage()
})
</script>
<template>
  <EditInspection
    :worker-list="workerList"
    :look-quality="lookQuality"
    :modal-obj="modalObj"
    :old-look-quality="oldLookQuality"
    @edit-inspection="editInspection"
  ></EditInspection>
  <div class="container">
    <div class="head">
      <div class="left"></div>
      <div class="title">质检工作台</div>
      <div class="right"><CurrentDateTime></CurrentDateTime></div>
    </div>
    <div class="statistic">
      <div class="item">
        <div class="img bg1"><img src="@/assets/images/u820.png" /></div>
        <div class="text">
          <div>待检测</div>
          <div>1</div>
        </div>
      </div>
      <div class="item">
        <div class="img bg2"><img src="@/assets/images/u820.png" /></div>
        <div class="text">
          <div>完成数</div>
          <div>1</div>
        </div>
      </div>
      <div class="item">
        <div class="img bg3"><img src="@/assets/images/u820.png" /></div>
        <div class="text">
          <div>合格数</div>
          <div class="success-number">1</div>
        </div>
      </div>
      <div class="item">
        <div class="img bg4"><img src="@/assets/images/u820.png" /></div>
        <div class="text">
          <div>报废数</div>
          <div class="fail-number">0</div>
        </div>
      </div>
    </div>
    <div class="table-filter">
      <div class="left">
        <TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsList" @change="changeTab"></TaskTabs>
      </div>
      <div class="right">
        <el-select
          v-model="projectIdArray"
          :teleported="false"
          size="large"
          :multiple-limit="1"
          multiple
          placeholder="项目"
          @change="queryProduct"
        >
          <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" multiple>
            <div class="item-option">
              <div>{{ item.id }}</div>
              <div>{{ item.projectName }}</div>
            </div>
          </el-option>
        </el-select>
        <el-select
          v-model="productIdArray"
          :teleported="false"
          size="large"
          :multiple-limit="1"
          multiple
          placeholder="产品"
        >
          <el-option v-for="item in productList" :key="item.id" :label="item.productName" :value="item.id" multiple>
            <div class="item-option">
              <div>{{ item.id }}</div>
              <div>{{ item.productName }}</div>
            </div>
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="table">
      <el-empty v-if="qualityList.length == 0" description="暂无数据" />
      <el-table
        v-else
        :data="qualityList"
        :header-cell-class-name="tableHeaderColor"
        row-class-name="row-bg"
        style="width: 100%; background: transparent"
        border
      >
        <el-table-column prop="workOrderId" align="center" label="工单号" />
        <el-table-column prop="projectId" align="center" label="项目号" />
        <el-table-column prop="productId" align="center" label="产品号" />
        <el-table-column prop="productName" align="center" label="产品名" />
        <el-table-column prop="procedureId" align="center" label="工序号" />
        <el-table-column prop="procedureName" align="center" label="工序名称" />
        <el-table-column prop="drawingNumber" align="center" label="图号" />
        <el-table-column prop="amount" align="center" label="图号" />
        <el-table-column prop="transferAmount" align="center" label="转移数量" />
        <el-table-column prop="scrappedAmount" align="center" label="报废数量" />
        <el-table-column prop="passAmount" align="center" label="合格数量" />
        <el-table-column prop="workerName" align="center" label="加工员" />
        <el-table-column prop="inspectionPeople" align="center" label="质检员" />
        <el-table-column align="center" label="操作" width="120px">
          <template #default="scope">
            <BigButton bg-color="#00ff00" @click="checkProduct(scope.row)">质检</BigButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  .head {
    background-image: url('/header-bg.png');
    background-position-x: center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    .left {
      width: 25%;
    }
    .title {
      width: 50%;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 36px;
      color: #ffffff;
      text-align: center;
    }
    .right {
      line-height: 60px;
      background-image: url('@/assets/images/u883.png');
      background-position-x: 0px;
      background-position-y: 10px;
      background-repeat: no-repeat;
      background-size: 40px;
      width: 25%;
      padding-left: 60px;
    }
    .left,
    .title,
    .right {
      margin-top: 12px;
    }
  }
  .statistic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .item {
      border-width: 0px;
      width: 24%;
      height: 144px;
      background-color: rgba(22, 72, 173, 0.737254901960784);
      border: none;
      border-radius: 8px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      .img {
        text-align: center;
        display: inline-block;
        margin: 0px 30px;
        position: relative;
        top: -5px;
        width: 98px;
        height: 98px;
        img {
          width: 50%;
          position: relative;
          top: 23px;
        }
      }
      .bg1 {
        background: url('@/assets/images/u819.png') no-repeat;
        background-size: cover;
      }
      .bg2 {
        background: url('@/assets/images/u837.png') no-repeat;
        background-size: cover;
      }
      .bg3 {
        background: url('@/assets/images/u825.png') no-repeat;
        background-size: cover;
      }
      .bg4 {
        background: url('@/assets/images/u831.png') no-repeat;
        background-size: cover;
      }
      .text {
        display: inline-block;
        position: relative;
        top: 25px;
        font-size: 25px;
      }
      .success-number {
        color: #00ff00;
      }
      .fail-number {
        color: #ff0000;
      }
    }
  }
  .table-filter {
    display: flex;
    justify-content: space-between;
    .left {
      width: 30%;
      margin-left: 10px;
    }
    .right {
      width: 34%;
      display: flex;
      justify-content: space-around;
      margin-top: 2.5vh;
      .el-select {
        width: 256px;
        :deep(.el-select__wrapper) {
          background-color: transparent !important;
        }
      }
      .el-select-dropdown__item {
        color: white;
      }
      .el-select-dropdown__item.is-hovering {
        color: #fff;
        background: transparent !important;
        /*background: linear-gradient(*/
        /*to right,*/
        /*rgba(147, 250, 255, 0),*/
        /*rgba(147, 250, 255, 0.4),*/
        /*rgba(147, 250, 255, 0)*/
        /*);*/
      }
      :deep(.el-select__popper) {
        border: 1px solid #1ca898;
        background: deepskyblue;
      }
      .item-option {
        width: 100%;
        display: flex;
        flex: 1;
        > div {
          width: 50%;
          text-align: center;
        }
      }
      :deep(.el-select__selection .el-tag) {
        background: transparent;
        font-size: 16px;
        color: white;
      }
      :deep(.el-icon) {
        display: none;
      }
    }
  }
  .table {
    margin: 20px 10px;
  }
}
:deep(.row-bg) {
  background-color: transparent;
  color: white;
  &:hover {
    color: #181818;
  }
}
:deep(.header-row-class) {
  background-color: #007fff !important;
  font-size: 20px;
  color: white;
}
</style>

 vite.config.ts

@@ -18,13 +18,14 @@
    proxy: {
      '/api-s/': {
        // http://192.168.20.119:8003 http://192.168.20.25:7010
        target: 'http://192.168.20.119:9081',
        //target: 'http://192.168.20.119:9081',
        target:'http://pad.fai365.com',
        ws: true,
        changeOrigin: true
      },
      '/api': {
        // http://192.168.20.119:8003 http://192.168.20.25:7010
        target: 'http://192.168.20.119:8001',
        target:'http://pad.fai365.com',
        ws: true,
        changeOrigin: true
      }