index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <style lang="scss" scoped>
  2. .search-box p {
  3. display: inline-block;
  4. border: 1px solid #f2f2f2;
  5. border-radius: 5px;
  6. margin-right: 10px;
  7. padding: 5px 10px;
  8. cursor: pointer;
  9. }
  10. #office-iframe {
  11. height: 800px;
  12. }
  13. </style>
  14. <template>
  15. <a-row :gutter="10">
  16. <a-col :sm="10" style="margin-bottom: 20px;z-index: 10">
  17. <a-card class="search-box" style="min-height:500px">
  18. <div style="margin-bottom:30px">
  19. <span style="display:inline-block;width:80px">行业</span>
  20. <a-cascader
  21. style="margin-top: 1rem;width:300px"
  22. :options="options"
  23. :showSearch="{ filter }"
  24. expandTrigger="hover"
  25. @change="onChange"
  26. placeholder="请选择行业"
  27. >
  28. <a-icon type="smile" slot="suffixIcon" class="test" />
  29. </a-cascader>
  30. </div>
  31. <div style="margin-bottom:30px">
  32. <span style="display:inline-block;width:80px">关键词</span>
  33. <a-select
  34. showSearch
  35. :value="value"
  36. placeholder="input search text"
  37. style="width: 300px"
  38. :defaultActiveFirstOption="false"
  39. :showArrow="false"
  40. :filterOption="false"
  41. @search="handleSearch"
  42. @change="handleChange"
  43. :notFoundContent="null"
  44. allowClear
  45. >
  46. <!-- <a-select-opt-group>
  47. -->
  48. <a-select-option v-for="d in data" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  49. <!-- </a-select-opt-group> -->
  50. </a-select>
  51. </div>
  52. <span style="display:inline-block;width:80px"></span>
  53. <a-button type="primary" @click="searchQuery" :disabled="value == undefined">生成</a-button>
  54. </a-card>
  55. </a-col>
  56. <a-col :sm="14" style="margin-bottom: 20px;z-index: 10">
  57. <a-card class="search-box" style="over-flow:auto">
  58. <a-list size="large" bordered :dataSource="title">
  59. <a-list-item slot="renderItem" slot-scope="item">{{ item }}</a-list-item>
  60. </a-list>
  61. </a-card>
  62. </a-col>
  63. </a-row>
  64. </template>
  65. <script>
  66. import { getAction, postAction } from '@/api/manage'
  67. import moment from 'moment'
  68. import $ from 'jquery'
  69. import qs from 'qs'
  70. export default {
  71. name: 'online-training-list',
  72. data() {
  73. return {
  74. options: [],
  75. data: [],
  76. value: undefined,
  77. dataOne: [],
  78. title: []
  79. }
  80. },
  81. components: {},
  82. methods: {
  83. searchQuery() {
  84. // /ctop/creativeTitle/titleSuggestion
  85. console.log(this.value)
  86. getAction('/ctop/creativeTitle/titleSearch', {
  87. firstCategory: this.dataOne[0],
  88. secondCategory: this.dataOne[1],
  89. keywords: this.value
  90. }).then(res => {
  91. console.log(res)
  92. this.title = res.result ? res.result : []
  93. })
  94. // firstCategory,secondCategory,keywords
  95. },
  96. getHangye() {
  97. getAction('/ctop/creativeTitle/getTitleLabel', '').then(res => {
  98. console.log(res)
  99. if (res.success) {
  100. this.options = res.result.map(item => {
  101. return {
  102. label: item.label,
  103. value: item.value,
  104. children:
  105. item.children.length > 0
  106. ? [{ label: '不限', value: 0 }].concat(item.children)
  107. : [{ label: '不限', value: 0 }]
  108. }
  109. })
  110. this.options = [{ label: '不限', value: 0 }].concat(this.options)
  111. }
  112. })
  113. },
  114. onChange(value, selectedOptions) {
  115. console.log(value, selectedOptions)
  116. this.dataOne = value
  117. this.value = undefined
  118. },
  119. filter(inputValue, path) {
  120. return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  121. },
  122. handleSearch(value) {
  123. if (this.dataOne.length > 0) {
  124. const str = { firstCategory: this.dataOne[0], secondCategory: this.dataOne[1], keyword: value }
  125. getAction('/ctop/creativeTitle/titleSuggestion', str).then(d => {
  126. const result = d.result ? d.result : []
  127. this.data = result.map(item => {
  128. return {
  129. value: item,
  130. text: item
  131. }
  132. })
  133. })
  134. } else {
  135. this.data = []
  136. return
  137. }
  138. },
  139. handleChange(value) {
  140. console.log(value)
  141. this.value = value
  142. }
  143. },
  144. mounted() {
  145. this.$nextTick(() => {
  146. this.getHangye()
  147. })
  148. },
  149. created() {}
  150. }
  151. </script>