table.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <div class="height_100 projectDB" v-DivHeight="getDivHeight">
  3. <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header" :header-cell-style="{'text-align':'center'}"
  4. v-if="showTable" :height="tableHeight" @sort-change="sortChange" v-el-table-infinite-scroll="getList" :infinite-scroll-distance="10"
  5. :infinite-scroll-disabled="disabled">
  6. <el-table-column label="#" width="60" type="index" align="center">
  7. <template slot-scope="scope">
  8. <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
  9. </template>
  10. </el-table-column>
  11. <el-table-column v-for="item in column.filter(item=>!item.ifHidden)" :render-header=" $commonJS.renderHeaderMethods" :key="item.value" :prop="item.value" :label="item.name" :sortable="item.ifSort?'custom':false" :align="['createName','createTime'].indexOf(item.value)!=-1?'center':'left'">
  12. <template slot-scope="scope">
  13. <div v-if="['name'].includes(item.value)" class="patentName">
  14. <el-link type="primary" @click="handleClick(scope.row, item.value)">
  15. <span v-html="$commonJS.getColumnData(scope.row, item)"></span>
  16. <span v-if="scope.row.ifUpdate" class="iconfont icon-shiwujiaoxing" style="color:red"></span>
  17. </el-link>
  18. <!-- <div v-if="scope.row.ifUpdate" class="jiankong" >
  19. <el-image class="img" :src="require('@/assets/img/摄像头.png')" fit="contain"></el-image>
  20. </div> -->
  21. </div>
  22. <div v-else v-html="$commonJS.getColumnData(scope.row, item)"></div>
  23. </template>
  24. </el-table-column>
  25. <el-table-column v-if="[1].indexOf(isOperate) == -1" label="操作" align="center" width="150px">
  26. <template slot-scope="scope">
  27. <el-dropdown split-button type="primary" size="small" @click="handleCommand('e', scope.row)" :hide-on-click="false" ref="showDropdown"
  28. @command="handleCommand($event, scope.row)">
  29. <span>编 辑</span>
  30. <el-dropdown-menu slot="dropdown" style="text-align:center">
  31. <el-dropdown-item>
  32. <el-dropdown @command="handleCommand($event, scope.row)" placement="left-start">
  33. <p> 专利导入 </p>
  34. <el-dropdown-menu style="text-align:center">
  35. <el-dropdown-item command="0"> Excel导入 </el-dropdown-item>
  36. <el-dropdown-item command="1">专利号导入 </el-dropdown-item>
  37. <el-dropdown-item command="2">检索条件导入 </el-dropdown-item>
  38. </el-dropdown-menu>
  39. </el-dropdown>
  40. </el-dropdown-item>
  41. <el-dropdown-item command="12">自定义栏位管理</el-dropdown-item>
  42. <el-dropdown-item command="15">定期更新条件</el-dropdown-item>
  43. <el-dropdown-item command="11">任务分配</el-dropdown-item>
  44. <el-dropdown-item command="14">导入导出历史</el-dropdown-item>
  45. <el-dropdown-item command="3">任务清单</el-dropdown-item>
  46. <el-dropdown-item command="5">报告管理</el-dropdown-item>
  47. <el-dropdown-item command="6">分类架构</el-dropdown-item>
  48. <!-- <el-dropdown-item command="7">事件</el-dropdown-item> -->
  49. <!-- <el-dropdown-item command="8">其他附件</el-dropdown-item> -->
  50. <el-dropdown-item command="9">项目分享</el-dropdown-item>
  51. <el-dropdown-item command="13">图表分析</el-dropdown-item>
  52. <el-dropdown-item command="10" divided style="color:red">删 除</el-dropdown-item>
  53. </el-dropdown-menu>
  54. </el-dropdown>
  55. </template>
  56. </el-table-column>
  57. </el-table>
  58. <el-alert v-if="isFlag" title="正在努力加载中..." type="success" center :closable="false" show-icon></el-alert>
  59. <el-alert v-if="isMore" title="没有更多啦!" type="warning" center show-icon></el-alert>
  60. </div>
  61. </template>
  62. <script>
  63. import { getTableHeight } from '@/views/components/mixins'
  64. import { workspaceOptions } from "../mixins";
  65. export default {
  66. mixins: [workspaceOptions,getTableHeight],
  67. props: {
  68. isOperate: {//控制显示
  69. type: [String, Number],
  70. default: ''
  71. },
  72. column: {//显示栏位管理数组
  73. type: Array,
  74. default: () => {
  75. return []
  76. }
  77. },
  78. row: null,
  79. //操作信息
  80. handleMessage:'',
  81. },
  82. data() {
  83. return {
  84. //正在努力加载中
  85. isFlag: false,
  86. //没有更多啦!
  87. isMore: false,
  88. //禁用懒加载
  89. disabled: true,
  90. params: {
  91. size: 5,
  92. current: 0
  93. },
  94. // 排序数组
  95. sort: [
  96. {
  97. "orderBy": "createTime",
  98. "orderType": 1
  99. }
  100. ],
  101. //事件类型及所选
  102. action:{
  103. type:'',//1表示删除,2表示其他,3表示新增
  104. id:''
  105. }
  106. };
  107. },
  108. watch: {
  109. handleMessage(val){
  110. if(val && this.row){
  111. this.updateData()
  112. }
  113. }
  114. },
  115. mounted() {
  116. if (!this.row) {
  117. this.disabled = true
  118. } else {
  119. this.disabled = false
  120. }
  121. },
  122. methods: {
  123. //更新数据
  124. updateData(){
  125. if(this.action.type == 1){
  126. if(this.tableData.length == 1){
  127. return false
  128. }
  129. var startIndex = this.tableData.findIndex(item=>{
  130. return item.id == this.action.id
  131. })
  132. this.tableData.splice(startIndex,1)
  133. let params = {
  134. ...this.params,
  135. searchQuery: this.$commonJS.objectToString(this.row.searchOption),//检索条件
  136. orderDTOList: this.sort,//排序
  137. groupField: this.row.groupBy,
  138. groupFieldValue: this.row.row.value,
  139. }
  140. this.getList2(params,1)
  141. } else if (this.action.type == 2) {
  142. let params = {
  143. ...this.params,
  144. searchQuery:`id=${this.action.id}`,//检索条件
  145. groupField: this.row.groupBy,
  146. groupFieldValue: this.row.row.value,
  147. }
  148. this.getList2(params,2)
  149. }
  150. },
  151. getList2(params,type){
  152. this.$api.queryPatentProject(params).then(res => {
  153. if (res.code == 200) {
  154. if(type == 1){
  155. var startIndex = (params.current-1)*size
  156. var endIndex = this.tableData.length
  157. var len = endIndex - startIndex
  158. this.tableData.splice(startIndex,len,...res.data.data)
  159. this.params.total = res.data.total
  160. }else if(type == 2){
  161. var startIndex = this.tableData.findIndex(item=>{
  162. return item.id == this.action.id
  163. })
  164. this.tableData.splice(startIndex,1,...res.data.data)
  165. }
  166. }
  167. }).catch(err => {
  168. })
  169. },
  170. getList() {
  171. if (!this.row) return;
  172. if (this.disabled) return;
  173. if (this.params.current * this.params.size >= this.params.total) {
  174. this.isMore = true
  175. this.disabled = true
  176. setTimeout(() => {
  177. this.isMore = false;
  178. this.isFlag = false
  179. }, 1000)
  180. }
  181. this.params.current += 1
  182. let params = {
  183. ...this.params,
  184. searchQuery: this.$commonJS.objectToString(this.row.searchOption),//检索条件
  185. orderDTOList: this.sort,//排序
  186. groupField: this.row.groupBy,
  187. groupFieldValue: this.row.row.value,
  188. }
  189. this.isMore = false;
  190. this.isFlag = true;
  191. this.$api.queryPatentProject(params).then(res => {
  192. if (res.code == 200) {
  193. this.tableData.push(...res.data.data)
  194. this.params.total = res.data.total
  195. }
  196. }).catch(err => {
  197. })
  198. setTimeout(() => {
  199. this.isMore = false;
  200. this.isFlag = false
  201. }, 1000)
  202. },
  203. // 排序
  204. sortChange({ column, prop, order }) {
  205. this.handleSort({ column, prop, order })
  206. if (!this.row) {
  207. this.$emit('on-sort', { column, prop, order })
  208. }
  209. },
  210. // 排序方法
  211. handleSort({ column, prop, order }) {
  212. this.sort=[]//如需要多个字段排序,则不需要清空
  213. if (order == null) {
  214. return;
  215. }
  216. var orderType = {
  217. ascending: 0,
  218. descending: 1
  219. }
  220. var params = this.sort.find(item => {
  221. return item.orderBy == prop
  222. })
  223. if (params) {
  224. params.orderType = orderType[order]
  225. } else {
  226. params = {}
  227. params.orderBy = prop
  228. params.orderType = orderType[order]
  229. this.sort.push(params)
  230. }
  231. this.params.current = 0
  232. this.disabled = false
  233. this.tableData.splice(0)
  234. this.getList()
  235. },
  236. },
  237. };
  238. </script>
  239. <style lang="scss">
  240. .projectDB{
  241. .el-table .cell {
  242. overflow: visible;
  243. }
  244. }
  245. </style>
  246. <style lang="scss" scoped>
  247. .patentName{
  248. z-index: 99999;
  249. position: relative;
  250. // margin: 0 15px;
  251. .jiankong{
  252. z-index: 99999;
  253. width: 25px;
  254. height: 25px;
  255. position: absolute;
  256. left: -25px;
  257. top: -12px;
  258. .img{
  259. z-index: 99999;
  260. width: 100%;
  261. height: 100%;
  262. }
  263. }
  264. }
  265. </style>