廖井涛
2024-04-25 ed6f35069824d71ee6da599a328d865eb0c58550
north-glass-erp/northglass-erp/src/views/sd/product/Test.vue
New file
@@ -0,0 +1,111 @@
<script setup>
import BasicTable from '@/components/sd/product/BasicTable.vue'
import request from "@/utils/request"
import deepClone from "@/utils/deepClone";
import {ElMessage} from "element-plus";
import router from "@/router";
import {onMounted, ref} from "vue";
/*title里的参数设置
 * {
 *    type:{expand,checkbox} 类型
 *    field: 数据指向位置
 *    title: 标题
 *    sortable: 是否可排序
 *    editRender: 是否可编辑
 *    showOverflow: 是否显示省略号
 *    width: 宽度
 *    fixed: left,right是否固定列
 *    slots:插槽类型
 *    filters:[{ data: '' }],slots: { filter: 'num1_filter' }} 表头筛选框
 *    editRender: { name: 'input', attrs: { placeholder: '' } } 数据列是否可编辑
 * }
 *
 * */
let tableProp = $ref({
  title:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    {type: 'checkbox',fixed:"left", title: '选择', width: 80 },
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'prodID', title: '编号', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } } },
    {field: 'product', title: '名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'typeName', title: '所属类别', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'query', title: '快速查询', sortable: true},
    {field: 'remarks', title: '备注', sortable: true,showOverflow:"ellipsis"},
    {field: 'creator', title: '创建人', sortable: true},
    {field: 'createTime', title: '创建时间', sortable: true}
  ],
  datas:null,
//脚部求和
  footList:['remarks'],
  //筛选条件列
  filter:{
    product:'n*'
  },
  buttons: [
     //{ code: 'myInsert', name: '新增' },
    // { code: 'deleteList', name: '删除' },
    { code: 'checkList', name: '提交'  }
  ],
})
let flag = $ref(false)
request.get("/product").then((res) => {
  if(res.code==200){
    tableProp.datas= res.data
    flag = true
    //console.log(res.data)
  }else{
    ElMessage.warning(res.msg)
  }
})
//接收子组件传过来的选中复选框数据
const getCheckList = (row) =>{
  alert('我接收到子组件传送的确认复选框信息可在控制台查看')
}
const getChildren = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}
const getFilterChildren = (param) =>{
}
</script>
<template>
  <div style="width: 100%;height: 100%;">
<!--    <el-input   v-model="tableProp.filter.product"/>-->
    <basic-table v-if="flag"
                 :tableProp="tableProp"
                 @getCheckList="getCheckList"
                 @getChildren="getChildren"
                 @getFilterChildren="getFilterChildren"
    ></basic-table>
  </div>
</template>
<style scoped>
</style>