前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

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

@@ -4,9 +4,62 @@
import {useRouter} from "vue-router"
const router = useRouter()

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



const tableData = [
  {
    id: '1',
    long: '1005',
    wide: '183.6',
    thick: '1991'
  },
  {
    id: '2',
    long: '105',
    wide: '183',
    thick: '191'
  }
]
const tableDataa = [
  {
    long: '1005',
    wide: '183.6',
    thick: '1991',
    station: '1'
  },
  {
    long: '105',
    wide: '183',
    thick: '191',
    station: '2'
  }
]
const open = () => {
  ElMessageBox.confirm(
    '是否删除该条信息?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
@@ -49,123 +102,172 @@
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',slots: { content:'content' },width: 50},
    {title: '操作', width: 110, slots: { default: 'button_slot' }},
    {type: 'seq', title: '自序', width: 80 },
  // columns:[
  //   {type:'expand',slots: { content:'content' },width: 50},
  //   // {title: '操作', width: 110, slots: { default: 'button_slot' }},
  //   {type: 'seq', title: '自序', width: 80 },

    {title: '审核', width: 40, slots: { default: 'state' }},
    {title: '入库', width: 40, slots: { default: 'state' }},
  //   // {title: '审核', width: 40, slots: { default: 'state' }},
  //   {title: 'id', width: 140, slots: { default: 'state' }},
  //   {title: '长', width: 160, slots: { default: 'state' }},
  //   {title: '宽', width: 160, slots: { default: 'state' }},
  //   {title: '厚', width: 160, slots: { default: 'state' }},

    {field: '3',width:120,  title: '退货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '4',width:120,  title: '退货员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5',width:120,  title: '退货日期',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '6',width:120,  title: '客户编码',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '7',width:120,  title: '客户名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '8',width:120,  title: '批次',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '9',width:120,  title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '10',width:120,   title: '发货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '11',width:120,  title: '退货方式',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '12',width:120,  title: '总数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '13',width:120,  title: '总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '14',width:120,  title: '总金额',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '15',width:120,  title: '报表日期',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '16',width:120,  title: '业务员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
  ],//表头按钮
  toolbarConfig: {
    buttons: [],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  //   // {field: '3',width:120,  title: '退货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
  // ],
  //表头按钮
  // toolbarConfig: {
  //   buttons: [],
  //   import: false,
  //   export: true,
  //   print: true,
  //   zoom: true,
  //   custom: true
  // },
  data:  [
    {
      '0': '1',
      '1': '',
      '2': '',
      '3': 'TH23120801',
      '4': '郑珊珊',
      '5': '2023-12-08',
      '6': '310',
      '7': '上海里诺建筑工程有限公司',
      '8': '补1-2',
      '9': '宿迁某某项目',
      '10': 'JG23112304',
      '11': '实物退货',
      '12': '8',
      '13': '15.68',
      '14': '11912.05',
      '15': '2023-11-24',
      '16': '王龙'
      'id': '1',
      'long': '5',
      'wide': '1005',
      'thick': '183.6',
    }
  ],//table body实际数据
  footerMethod ({ columns, data }) {//页脚函数
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        // if (props.tableProp.footList.includes(column.field)) {
        //   return sumNum(data, column.field)
        // }
        return ''
      })
    ]
  }
  ],
  //table body实际数据
  // footerMethod ({ columns, data }) {//页脚函数
  //   return[
  //     columns.map((column, columnIndex) => {
  //       if (columnIndex === 0) {
  //         return '合计:'
  //       }
  //       // if (props.tableProp.footList.includes(column.field)) {
  //       //   return sumNum(data, column.field)
  //       // }
  //       return ''
  //     })
  //   ]
  // }
})
</script>

<template>
  <div>
    <el-date-picker
    <!-- <el-date-picker
        v-model="value1"
        type="daterange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    /> -->
    <!-- <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button> -->
    <el-button style="margin-top: -5px;margin-left: 5px;"   id="searchButton" type="primary" @click="dialogFormVisible = true">上片输入</el-button>
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" @click="dialogFormVisiblea = true">原片信息</el-button>
    <!-- <el-button style="margin-top: -5px"  id="searchButton" type="danger">人工拿走</el-button> -->


    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row }">
        <ul class="expand-wrapper">
          <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!=undefined ">
            <span style="font-weight: bold">{{item.title+':  '}}</span>
            <span>{{ row[item.field] }}</span>
          </li>
        </ul>
      </template>

      <template #state="{ row}">
        <el-checkbox checked/>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
    </vxe-grid>
    <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="id" 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 fixed="right" label="操作" align="center" width="200">
            <template #default>
              <el-button size="mini" type="text" plain @click="open">人工拿走</el-button>
            </template>
        </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

  
  <el-dialog v-model="dialogFormVisible" top="21vh" 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: 13.2vw;margin-left: 14px;">
                <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="dialogFormVisible = false">
          确认
        </el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogFormVisiblea" top="21vh" width="40%" title="原片信息">
    <el-table height="100%" ref="table" :data="tableDataa" @row-click="handle">
      <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="station"
        align="center"
        label="工位"
        min-width="120"
      />
    </el-table>
    <div style="text-align: center; height: 22px; margin-top: 30px;">
        <el-button @click="dialogFormVisiblea = false">关闭</el-button>
      </div>
  </el-dialog>
</template>

<style scoped>

#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;
}
</style>