index.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. // 单据中使用产品表
  2. <template>
  3. <div>
  4. <slot name="operation"></slot>
  5. <a-table
  6. :loading="loading"
  7. class="ant-table-striped"
  8. :row-selection="{type:props.filterMultiple?'radio':'checkbox', selectedRowKeys: selectedRowKeys, onChange: onSelectChange,fixed:true,onSelect:onSelect ,hideSelectAll:true}"
  9. :rowKey="rowKey"
  10. :keep-selection="true"
  11. :columns="columns"
  12. :data-source="data"
  13. :scroll="{x:'max-content'}"
  14. :pagination="{showSizeChanger:true,defaultPageSize:props.param.content.pageSize,total:total,current:props.param.content.pageNumber}"
  15. @change="onChange"
  16. :size="size"
  17. :bordered="!hideBorder"
  18. :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
  19. <template #headerCell="{ column }">
  20. <div style="min-width:100px;" v-if="column.filter == 1 || column.filter == 2">
  21. <a-input v-model:value="column.value" :placeholder="column.title" @change="setSearchParam(column.dataIndex,column.value)" @pressEnter="listData"></a-input>
  22. </div>
  23. <span v-else style="display:inline-block;padding:0 10px;">{{column.title}}</span>
  24. </template>
  25. <template #bodyCell="{ column, record }">
  26. <slot name="tb_cell" :data="{column, record}"></slot>
  27. </template>
  28. </a-table>
  29. </div>
  30. </template>
  31. <script setup>
  32. import {defineEmits,ref,defineProps,defineExpose,onMounted,onUnmounted,computed } from 'vue';
  33. import Api from '@/api/api'
  34. import { useRouter } from "vue-router";
  35. import { useBaseStore } from '@/stores/modules/base'
  36. import { storeToRefs } from 'pinia'
  37. const base = useBaseStore()
  38. let { tableRecord } = storeToRefs(base)
  39. const router = useRouter()
  40. const props = defineProps({
  41. columns: Array,
  42. param: Object,
  43. hideBorder:Boolean,
  44. size:String,
  45. tableid:Number,
  46. rowKey:String,
  47. filterMultiple:Boolean,
  48. loadOverHandle: {
  49. type:Boolean,
  50. default:() => true
  51. },
  52. sequence: {
  53. type:Boolean,
  54. default:() => false
  55. }
  56. })
  57. const columns = ref(props.columns)
  58. const data = ref([])
  59. const selectedRowKeys = ref([])
  60. const total = ref(0)
  61. const emit = defineEmits(['onSelect','listData','handleList'])
  62. const onSelectChange =(changableRowKeys, selectedRows)=>{
  63. selectedRowKeys.value = changableRowKeys;
  64. }
  65. const onChange = (pagination, filters, sorter, { currentDataSource })=>{
  66. selectedRowKeys.value = tableRecord.value.map(e=>e.itemid)
  67. props.param.content.pageNumber = pagination.current
  68. props.param.content.pageSize = pagination.pageSize
  69. listData()
  70. }
  71. const loading = ref(false)
  72. const listData = async (num,size)=> {
  73. loading.value = true
  74. props.param.content.tableid = props.tableid
  75. const res = await Api.requested(props.param)
  76. emit('handleList',res)
  77. data.value = res.data
  78. total.value = res.total
  79. loading.value = false
  80. emit('listData',data.value)
  81. }
  82. const onSelect = async (record, selected, selectedRows, nativeEvent)=>{
  83. if (!selected) {
  84. tableRecord.value = tableRecord.value.filter(e=>e[props.rowKey] !== record[props.rowKey])
  85. } else {
  86. tableRecord.value.push(record)
  87. }
  88. emit('onSelect',tableRecord.value)
  89. }
  90. const reloadSelect = () =>{
  91. selectedRowKeys.value = []
  92. tableRecord.value = []
  93. emit('onSelect',tableRecord.value)
  94. }
  95. const setSearchParam = (title,value)=>{
  96. props.param.content.pageNumber = 1
  97. props.param.content.where.tablefilter = props.param.content.where.tablefilter ? props.param.content.where.tablefilter : {}
  98. props.param.content.where.tablefilter[dataIndex] = value
  99. }
  100. let sourceObj = ref({})
  101. let targetObj = ref({})
  102. let noRequence = () =>{}
  103. let customRow = (record, index) => {
  104. console.log(record, index);
  105. return {
  106. style: {
  107. cursor: "move",
  108. },
  109. // 鼠标移入
  110. onMouseenter: (event) => {
  111. // 兼容IE
  112. var ev = event || window.event;
  113. ev.target.draggable = true;
  114. },
  115. // 开始拖拽
  116. onDragstart: (event) => {
  117. // 兼容IE
  118. var ev = event || window.event;
  119. // 阻止冒泡
  120. ev.stopPropagation();
  121. // 得到源目标数据
  122. sourceObj.value = record;
  123. },
  124. // 拖动元素经过的元素
  125. onDragover: (event) => {
  126. // 兼容 IE
  127. var ev = event || window.event;
  128. // 阻止默认行为
  129. ev.preventDefault();
  130. },
  131. // 鼠标松开
  132. onDrop: async (event) => {
  133. // 兼容IE
  134. var ev = event || window.event;
  135. // 阻止冒泡
  136. ev.stopPropagation();
  137. // 得到目标数据
  138. targetObj.value = record;
  139. const tempDta = data.value;
  140. tempDta[targetObj.value.weight] = sourceObj.value;
  141. tempDta[sourceObj.value.weight] = targetObj.value;
  142. let source
  143. let target
  144. tempDta.forEach((item, index) => {
  145. item.weight = index;
  146. if (sourceObj.value[props.rowKey] == item[props.rowKey]) source = item
  147. if (targetObj.value[props.rowKey] == item[props.rowKey]) target = item
  148. });
  149. let res = await Api.requested({
  150. "id": "20221201134901",
  151. "content": {
  152. "ownertable": props.rowKey.substring(0,props.rowKey.indexOf('id')),
  153. "sequencesorts": [
  154. {
  155. "ownerid": source[props.rowKey],
  156. "sequence": props.param.content.pageSize * (props.param.content.pageNumber - 1) + source.weight
  157. },
  158. {
  159. "ownerid": target[props.rowKey],
  160. "sequence": props.param.content.pageSize * (props.param.content.pageNumber - 1) + target.weight
  161. }
  162. ]
  163. }
  164. })
  165. },
  166. };
  167. }
  168. onMounted(()=>{
  169. listData()
  170. })
  171. onUnmounted(()=>{
  172. tableRecord.value = []
  173. })
  174. defineExpose({
  175. listData,
  176. reloadSelect,
  177. tableRecord
  178. })
  179. </script>
  180. <style>
  181. </style>
  182. <style scoped>
  183. .ant-table-striped :deep td{
  184. font-size: 12px;
  185. }
  186. </style>