123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- // 单据中使用产品表
- <template>
- <div>
- <slot name="operation"></slot>
- <a-table
- :loading="loading"
- class="ant-table-striped"
- :row-selection="{type:props.filterMultiple?'radio':'checkbox', selectedRowKeys: selectedRowKeys, onChange: onSelectChange,fixed:true,onSelect:onSelect ,hideSelectAll:true}"
- :rowKey="rowKey"
- :keep-selection="true"
- :columns="columns"
- :data-source="data"
- :scroll="{x:'max-content'}"
- :pagination="{showSizeChanger:true,defaultPageSize:props.param.content.pageSize,total:total,current:props.param.content.pageNumber}"
- @change="onChange"
- :size="size"
- :bordered="!hideBorder"
- :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
- <template #headerCell="{ column }">
- <div style="min-width:100px;" v-if="column.filter == 1 || column.filter == 2">
- <a-input v-model:value="column.value" :placeholder="column.title" @change="setSearchParam(column.dataIndex,column.value)" @pressEnter="listData"></a-input>
- </div>
- <span v-else style="display:inline-block;padding:0 10px;">{{column.title}}</span>
- </template>
- <template #bodyCell="{ column, record }">
- <slot name="tb_cell" :data="{column, record}"></slot>
- </template>
- </a-table>
- </div>
- </template>
- <script setup>
- import {defineEmits,ref,defineProps,defineExpose,onMounted,onUnmounted,computed } from 'vue';
- import Api from '@/api/api'
- import { useRouter } from "vue-router";
- import { useBaseStore } from '@/stores/modules/base'
- import { storeToRefs } from 'pinia'
- const base = useBaseStore()
- let { tableRecord } = storeToRefs(base)
- const router = useRouter()
- const props = defineProps({
- columns: Array,
- param: Object,
- hideBorder:Boolean,
- size:String,
- tableid:Number,
- rowKey:String,
- filterMultiple:Boolean,
- loadOverHandle: {
- type:Boolean,
- default:() => true
- },
- sequence: {
- type:Boolean,
- default:() => false
- }
- })
- const columns = ref(props.columns)
- const data = ref([])
- const selectedRowKeys = ref([])
- const total = ref(0)
- const emit = defineEmits(['onSelect','listData','handleList'])
- const onSelectChange =(changableRowKeys, selectedRows)=>{
- selectedRowKeys.value = changableRowKeys;
- }
- const onChange = (pagination, filters, sorter, { currentDataSource })=>{
- selectedRowKeys.value = tableRecord.value.map(e=>e.itemid)
- props.param.content.pageNumber = pagination.current
- props.param.content.pageSize = pagination.pageSize
- listData()
- }
- const loading = ref(false)
- const listData = async (num,size)=> {
- loading.value = true
- props.param.content.tableid = props.tableid
- const res = await Api.requested(props.param)
- emit('handleList',res)
- data.value = res.data
- total.value = res.total
- loading.value = false
- emit('listData',data.value)
- }
- const onSelect = async (record, selected, selectedRows, nativeEvent)=>{
- if (!selected) {
- tableRecord.value = tableRecord.value.filter(e=>e[props.rowKey] !== record[props.rowKey])
- } else {
- tableRecord.value.push(record)
- }
- emit('onSelect',tableRecord.value)
- }
- const reloadSelect = () =>{
- selectedRowKeys.value = []
- tableRecord.value = []
- emit('onSelect',tableRecord.value)
- }
- const setSearchParam = (title,value)=>{
- props.param.content.pageNumber = 1
- props.param.content.where.tablefilter = props.param.content.where.tablefilter ? props.param.content.where.tablefilter : {}
- props.param.content.where.tablefilter[dataIndex] = value
- }
- let sourceObj = ref({})
- let targetObj = ref({})
- let noRequence = () =>{}
- let customRow = (record, index) => {
- console.log(record, index);
- return {
- style: {
- cursor: "move",
- },
- // 鼠标移入
- onMouseenter: (event) => {
- // 兼容IE
- var ev = event || window.event;
- ev.target.draggable = true;
- },
- // 开始拖拽
- onDragstart: (event) => {
- // 兼容IE
- var ev = event || window.event;
- // 阻止冒泡
- ev.stopPropagation();
- // 得到源目标数据
- sourceObj.value = record;
- },
- // 拖动元素经过的元素
- onDragover: (event) => {
- // 兼容 IE
- var ev = event || window.event;
- // 阻止默认行为
- ev.preventDefault();
- },
- // 鼠标松开
- onDrop: async (event) => {
- // 兼容IE
- var ev = event || window.event;
- // 阻止冒泡
- ev.stopPropagation();
- // 得到目标数据
- targetObj.value = record;
- const tempDta = data.value;
- tempDta[targetObj.value.weight] = sourceObj.value;
- tempDta[sourceObj.value.weight] = targetObj.value;
- let source
- let target
- tempDta.forEach((item, index) => {
- item.weight = index;
- if (sourceObj.value[props.rowKey] == item[props.rowKey]) source = item
- if (targetObj.value[props.rowKey] == item[props.rowKey]) target = item
- });
- let res = await Api.requested({
- "id": "20221201134901",
- "content": {
- "ownertable": props.rowKey.substring(0,props.rowKey.indexOf('id')),
- "sequencesorts": [
- {
- "ownerid": source[props.rowKey],
- "sequence": props.param.content.pageSize * (props.param.content.pageNumber - 1) + source.weight
- },
- {
- "ownerid": target[props.rowKey],
- "sequence": props.param.content.pageSize * (props.param.content.pageNumber - 1) + target.weight
- }
- ]
- }
- })
- },
- };
- }
- onMounted(()=>{
- listData()
- })
- onUnmounted(()=>{
- tableRecord.value = []
- })
- defineExpose({
- listData,
- reloadSelect,
- tableRecord
- })
- </script>
- <style>
- </style>
- <style scoped>
- .ant-table-striped :deep td{
- font-size: 12px;
- }
- </style>
|