data-class-picker.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div>
  3. <a-modal
  4. :body-style="bodyStyle"
  5. :title="title"
  6. :destroy-on-close="true"
  7. :visible="visible"
  8. :width="modalWidth"
  9. @ok="handleOk"
  10. @cancel="handleCancel"
  11. >
  12. <!-- 列表 -->
  13. <SdTable
  14. ref="SJMXDataTable"
  15. :row-key="(record, index) => index"
  16. :columns="columns"
  17. :data-source="dataList"
  18. :pagination="false"
  19. :row-selection="{
  20. getCheckboxProps() {
  21. return {}
  22. },
  23. selectedRowKeys: selectedRowKeys,
  24. onChange: onSelectChange,
  25. }"
  26. >
  27. </SdTable> </a-modal
  28. ></div>
  29. </template>
  30. <script>
  31. import components from './_import-components/data-class-picker-import'
  32. import SdTable from '@/common/components/sd-table.vue'
  33. import apis from './data-market'
  34. export default {
  35. name: 'DataClassPicker',
  36. metaInfo: {
  37. title: 'DataClassPicker',
  38. },
  39. components: {
  40. ...components,
  41. SdTable,
  42. },
  43. props: {
  44. title: {
  45. type: String,
  46. default: '分类选择器',
  47. },
  48. // 弹出窗宽度
  49. modalWidth: {
  50. type: String,
  51. default: '1200px',
  52. },
  53. // 弹出窗显示参数
  54. visible: {
  55. type: Boolean,
  56. default: false,
  57. },
  58. },
  59. data() {
  60. return {
  61. columns: [
  62. {
  63. title: '序号',
  64. dataIndex: 'sortNum',
  65. key: 'sortNum',
  66. customRender: (text, record, index) => `${index + 1}`,
  67. width: '80px',
  68. },
  69. {
  70. title: '分类名称',
  71. dataIndex: 'categoryName',
  72. key: 'categoryName',
  73. },
  74. {
  75. title: '分类描述',
  76. dataIndex: 'categoryDesc',
  77. key: 'categoryDesc',
  78. },
  79. ],
  80. dataList: [],
  81. selectedRowKeys: [],
  82. selectedRows: [],
  83. bodyStyle: {
  84. minHeight: '700px',
  85. },
  86. }
  87. },
  88. created() {
  89. this.getDataList()
  90. },
  91. methods: {
  92. getDataList() {
  93. // 获取全部信息
  94. apis.categoryListWhole().then((res) => {
  95. this.dataList = res.data
  96. })
  97. },
  98. handleOk(e) {
  99. this.$parent.flTableShow = !this.$parent.flTableShow
  100. this.$emit('listMxSelected', this.selectedRowKeys, this.selectedRows)
  101. },
  102. handleCancel(e) {
  103. this.$parent.flTableShow = !this.$parent.flTableShow
  104. },
  105. onSelectChange(selectedRowKeys, selectedRows) {
  106. this.selectedRowKeys = selectedRowKeys
  107. this.selectedRows = selectedRows
  108. },
  109. },
  110. }
  111. </script>
  112. <style module lang="scss">
  113. @use '@/common/design' as *;
  114. </style>