前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

 UI-Project/src/views/sd/returns/Returns.vue

@@ -1,55 +1,407 @@
<script setup>
import {ArrowLeftBold, ArrowRight, Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router";
let indexFlag=$ref(1)
function changeRouter(index){
  indexFlag=index
<script lang="ts" setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()
import type { TableColumnCtx } from 'element-plus'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const add = ref(false)
const adda = ref(false)

const value = ref('')

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const options = [
  {
    value: 'Option1',
    label: 'P202561456',
  },
  {
    value: 'Option2',
    label: 'P202561456',
  },
  {
    value: 'Option3',
    label: 'P202561456',
  },
  {
    value: 'Option4',
    label: 'P202561456',
  },
  {
    value: 'Option5',
    label: 'P202561456',
  },
]
const tableData: User[] = [

  {
    id: 'P202561456',
    long: '1005',
    wide: '183.6',
    thick: '1991',
  },
  {
    id: 'P202561456',
    long: '105',
    wide: '183',
    thick: '191',
  }
]
const tableDataa = [
  {
    long: '1005',
    wide: '183.6',
    thick: '1991',
    station: '1'
  },
  {
    long: '105',
    wide: '183',
    thick: '191',
    station: '1'
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      // router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
      state: true
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  data:  [
    {
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],
})
</script>

<template>
  <div id="main-div">
    <div id="div-title">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item @click="changeRouter(1)" :class="indexFlag===1?'indexTag':''" :to="{ path: '/main/returns/selectReturns' }">退货首页</el-breadcrumb-item>
        <el-breadcrumb-item @click="changeRouter(2)" :class="indexFlag===2?'indexTag':''" :to="{ path: '/main/returns/selectDeliveryList' }">发货退货</el-breadcrumb-item>
        <el-breadcrumb-item @click="changeRouter(3)" :class="indexFlag===3?'indexTag':''" :to="{ path: '/main/returns/returnsReport' }">报表</el-breadcrumb-item>
        <el-breadcrumb-item v-show="false" :to="{ path: '/main/product/test1' }">测试</el-breadcrumb-item>
      </el-breadcrumb>
  <div>
    <div id="dotClass">
      <div>打标机就绪状态：</div>
      <i style="margin-top: 2px; background-color: green;width:18px;  height:18px;  border-radius: 50%;  display: block"></i>
    <el-button style="margin-left: 30px;margin-top: -3px;">手动确认</el-button>
 
    <div style="margin-left: 70px;">切割机就绪状态：</div>
     <i style="margin-top: 2px; background-color: #911005 ;width:18px;  height:18px;  border-radius: 50%;  display: block"></i>
    <el-button style="margin-left: 30px;margin-top: -3px;" >手动确认</el-button>
   </div>
    <el-button style="margin-top: 5px;margin-left: 15px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">选择工程</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="primary">开始上片</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="warning" >暂停</el-button>
    <el-button style="margin-top: 5px;margin-left: 20px;"  id="searchButton" type="danger" >停止任务</el-button>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto">
        <!-- <el-table height="100%" ref="table" :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="工程号" min-width="80" />
          <el-table-column prop="long" align="center" label="原片宽" min-width="120" />
          <el-table-column prop="wide" align="center" label="原片长" min-width="120" />
          <el-table-column prop="thick" align="center" label="膜系" min-width="120" />
          <el-table-column prop="thick" align="center" label="数量" min-width="120" />
          <el-table-column
            align="center"
            label="状态"
            min-width="80"
          >
          <el-tag type="success">就绪</el-tag>
          </el-table-column>
        </el-table> -->
    <el-table
    height="100%"
     ref="table"
     :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"
      :data="tableData"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="id" label="工程号" width="200" align="center"/>
      <el-table-column prop="long" label="原片宽" align="center"/>
      <el-table-column prop="wide" label="原片长" align="center"/>
      <el-table-column prop="thick" label="膜系" align="center"/>
      <el-table-column prop="thick" label="数量" align="center"/>
      <el-table-column
            align="center"
            label="状态"
            min-width="80"
          >
          <el-tag type="success">就绪</el-tag>
          <!-- <el-tag type="danger">未就绪</el-tag> -->
          </el-table-column>
    </el-table>
      </div>
    </el-card>
      <div id="parent">
        <img src="../../../assets/shangpianji .png" alt="" style="max-width: 20%;max-height: 20%;margin-top: 20px;margin-left: 130px;">
        <el-button style="margin-top: -830px;margin-left: -40px;"  size="mini" id="searchButton" @click="add = true">添加原片</el-button>
        <el-button style="margin-top: -10px;margin-left: -80px;"  size="mini" id="searchButton"  @click="adda = true">添加原片</el-button>
        <div id="overlay" v-show="state"></div>
        <div id="overlaya" v-show="statea"></div>
      </div>
    </div>

    <div id="main-body">
      <router-view  />
  
  <el-dialog v-model="dialogFormVisible" top="24vh" width="30%" title="工程" >
    <div style="margin-left: 50px;margin-bottom: 10px;">
      <el-form-item label="工程号：" :required="true">
        <el-select
    v-model="value"
    clearable
    placeholder="请选择工程"
    style="width: 300px"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
              </el-form-item>
    </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
  </div>
    </template>
  </el-dialog>
  <el-dialog v-model="add" top="23vh" width="40%" title="添加原片" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="膜系：" :required="true" style="width: 14vw;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="数量：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="getTableRow('edit')">
          确认
        </el-button>
        <el-button @click="add = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="adda" top="23vh" width="40%" title="添加原片" >
    <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;">
            <el-form  size="mini" label-width="150px">
      <el-form >
        <el-row style="margin-top: -15px;margin-bottom: -2px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="宽：" :required="true" style="width: 14vw">
                <el-input  autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="长：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="6">
              <div id="dt" style="font-size: 15px;">
        <div>
              <el-form-item label="膜系：" :required="true" style="width: 14vw;">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
          <el-col :span="9">
            <div id="dta" style="font-size: 15px;">
        <div>
              <el-form-item label="数量：" :required="true" style="width: 14vw">
                <el-input autocomplete="off" />
              </el-form-item></div></div>
          </el-col>
        </el-row>
        </el-form>
            </el-form>
          </div>
    <template #footer>
      <div id="dialog-footer">
        <el-button type="primary" @click="adda = false">
          确认
        </el-button>
        <el-button @click="adda = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
#main-div{
  width: 100%;
  height: 100%;

#dt { display:block; float:left;line-height: 20px;margin-left: 100px;}
#dta { display:block; float:left;line-height: 20px;margin-left: 80%;}
#dialog-footer{
  text-align: center;
  margin-top: -15px;
}
#div-title{
  height: 2%;
  width: 100%;
#dotClass {
  display: flex;
  margin-left: 20px; 
  size: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}
#searchButton{
  margin-top: -5px;
  margin-left: 1rem;
#parent{
  position: relative;
}
#searchButton1{
//margin-left: 10rem;
#overlay{
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 15px;
  background-color: #529b2e;
  margin-top: -407px;
  margin-left: 171px;
}
/*main-body样式*/
#main-body{
  width: 99%;
  height: 95%;
  margin-top: 1%;
}
#select{
  margin-left:0.5rem;
}
:deep(.indexTag .el-breadcrumb__inner){
  color: #5CADFE !important;
#overlaya{
  position: absolute;
  z-index: 1;
  width: 212px;
  height: 15px;
  background-color: #529b2e;
  margin-top: -40px;
  margin-left: 167px;
}
</style>