YiWuProject.git

<template>
  <el-header height="auto">
    <el-descriptions
        class="margin-top"
        title=""
        :column="4"
        :size="'default'"
        border
    >
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          操作单号
        </template>
        <el-input v-model="form.buyItem" placeholder="单号" disabled></el-input>
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购类型
        </template>
        <el-input v-model="form.buyItem" placeholder="采购类型" disabled></el-input>
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购部门
        </template>
        <el-input v-model="form.buyItem" placeholder="采购部门" disabled></el-input>
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          供应商
        </template>
        <el-input v-model="form.buyItem" placeholder="供应商" disabled></el-input>
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购员
        </template>
        <el-input v-model="form.buyItem" placeholder="采购员" disabled></el-input>
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          采购组织
        </template>
        <el-input v-model="form.buyItem" placeholder="采购组织" disabled></el-input>
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy">
        <template #label>
          制表日期
        </template>
        <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择制表日期"
        />
      </el-descriptions-item>
 
      <el-descriptions-item label-class-name="label-diy" class-name="content-diy"></el-descriptions-item>
 
    </el-descriptions>
  </el-header>
 
  <el-main style="padding-top: 5px;height:100%">
    <vxe-grid
        max-height="500"
        @filter-change="filterChanged"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >
 
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{ key + ':  ' }}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>
 
    </vxe-grid>
 
  </el-main>
 
</template>
 
<script setup>
import {ref, reactive} from 'vue'
 
let router = useRouter()
import {useRouter} from "vue-router";
import { ElMessage, ElMessageBox} from "element-plus";
 
const value = ref('')
 
//组件接收参数
const gridOptions = reactive({
  border: "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe: true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true, height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  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
  },
  //表头参数、列名
  columns: [
    {type: 'seq', fixed: "left", title: ' ', width: 50},
    {type: 'checkbox', fixed: "left", title: '', width: 50},
    {
      field: 'cgdh',
      width: '10%',
      title: '物料编码',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'cgzt',
      width: '10%',
      title: '物料名称',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'gys',
      width: '10%',
      title: '产地',
 
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'w',
      width: '8%',
      title: '宽度',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'g',
      width: '8%',
      title: '高度',
      filters: [{data: ''}],
      sortable: true,
 
    },
    {
      field: 'h',
      width: '8%',
      title: '厚度',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'xh',
      width: '8%',
      title: '型号',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'dw',
      width: '8%',
      title: '单位',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '数量',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'czsl',
      width: '8%',
      title: '操作数量',
      type: 'number',
      editRender: {name: 'input', type: 'number', attrs: {placeholder: ''}}
    },
    {
      field: 'sl',
      width: '12%',
      title: '箱数',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'je',
      width: '8%',
      title: '单片面积',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'je',
      width: '12%',
      title: '单价',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'sl',
      width: '8%',
      title: '总面积',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '总金额',
      filters: [{data: ''}],
      sortable: true
    },
    {
      field: 'yl',
      width: '10%',
      title: '备注',
      filters: [{data: ''}],
      sortable: true
    }
  ],
  //表头按钮
  toolbarConfig: {
    buttons: [
      {type: 'text'},
      {
        'name': '保存订单',
        status: 'primary',
        'code': 'Save'
      }, {
        'name': '入库',
        status: 'primary',
        'code': 'Storage'
      },
      {
        'name': '退货',
        status: 'primary',
        'code': 'Return'
      },
      {
        'name': '取消',
        status: '',
        'code': 'Cancel'
      }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    tools: [],
 
  },
  //table body实际数据
  data: [{}, {}, {}],
  //脚合并
  mergeFooterItems: [
    {row: 0, col: 0, rowspan: 1, colspan: 3}
  ],
  //合并脚
  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 ''
      })
    ]
  },
 
})
 
const xGrid = ref()
const gridEvents = {
  toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
//保存
        case 'Save': {
          MessageAlertShow('点击了保存订单','操作提示');
          //MessageShow('点击了保存订单！', 'error');
          break;
        }
//取消，返回查询页面
        case 'Cancel': {
          // router.push({path: '/main/purchaseOrder/StoragePurchaseOrder'})
          break
        }
//入库
        case 'Storage': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据！', 'warning');
            return
          } else {
            MessageConfirmShow('入库', '是否确认对选中的' + $grid.getCheckboxRecords().length + '物料进行入库操作！');
          }
          break
        }
//退货
        case 'Return': {
          if ($grid.getCheckboxRecords().length === 0) {
            MessageShow('请选择至少一条数据！', 'warning');
            return
          } else {
 
            MessageConfirmShow('退货', '是否确认对选中的' + $grid.getCheckboxRecords().length + '物料进行退货操作！');
          }
          break
        }
 
      }
    }
  },
  toolbarToolClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'myPrint': {
          $grid.print()
          break
        }
      }
    }
  },
}
 
//表单数据
const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  supplier: '',
  buyer: '',
  buyItem: '',
  buyType: ''
 
})
 
 
//页面逻辑代码执行
function logicExecute(type){
  const $grid = xGrid.value
  switch (type) {
    case '入库':
      //入库逻辑代码TODO
      MessageShow('入库成功！', 'success');
      break;
    case '退货':
      //退货逻辑代码TODO
      MessageShow('退货成功！', 'success');
      break;
    default:
      MessageShow('未知操作！', 'error');
      break;
  }
  return true;
}
 
//提示信息
//信息内容，显示方式，显示标题，类型
const MessageShow = (content,type='success') => {
    ElMessage({
      message: content,
      type: type,
      showClose: true,
    })
}
 
//操作确认类信息：操作类型，提示内容，提示标头，提示类型
const MessageConfirmShow = (czType, content, title='操作确认提示', type='warning') => {
  ElMessageBox.confirm(
      content,
      title,
      {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: type,
        center: true,
      }
  )
      //点击了确定
      .then(() => {
 
        return logicExecute(czType);
      })
      //点击了取消
      .catch(() => {
        return false;
      })
}
 
//弹窗信息
const MessageAlertShow=(content,title,type='info')=>{
 
  ElMessageBox.alert(content, title, {
    // 禁止自动对焦
    //autofocus: false,
    confirmButtonText: 'OK',
    /*callback: (action: Action) => {
      MessageShow(`action: ${action}`,type)
    },*/
  })
}
 
</script>
 
 
<style scoped>
:deep(.el-descriptions__table .label-diy) {
  text-align: center;
  width: 100px;
  /*  font-size: large;*/
}
</style>