dataList.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <div class="data-list">
  3. <el-table :data="dataList" style="width: 100%" header-row-class-name="headerBg" empty-text="没有项目信息">
  4. <el-table-column prop="id" label="ID" align="center" width="80"/>
  5. <el-table-column prop="categoryId" label="所属分类" align="left" min-width="180"/>
  6. <!-- <el-table-column prop="customer.name" label="所属客户" align="left" min-width="180"/> -->
  7. <el-table-column prop="name" label="项目名称" align="left" min-width="180"/>
  8. <el-table-column prop="createTime" label="创建时间" align="center" width="180"/>
  9. <el-table-column prop="statusName" label="项目状态" align="center" width="180">
  10. <template #default="scope">
  11. <div v-if="scope.row.status==5">启用</div>
  12. <div v-if="scope.row.status==6">停用</div>
  13. </template>
  14. </el-table-column>
  15. <el-table-column label="操作" align="center" fixed="right" width="200">
  16. <template #default="scope">
  17. <div class="btns">
  18. <el-button type="primary" size="small" @click="btnEdit(scope.row)"><svg-icon icon-class="edit"/>编辑</el-button>
  19. <el-button type="danger" size="small" @click="btnDelete(scope.row.id)"><svg-icon icon-class="delete"/>删除</el-button>
  20. </div>
  21. </template>
  22. </el-table-column>
  23. </el-table>
  24. <div class="page-info">
  25. <el-pagination
  26. :currentPage="queryForm.page"
  27. :page-size="queryForm.pageSize"
  28. :total="recordCount"
  29. :page-count="pageTotal"
  30. background
  31. layout="prev, pager, next"
  32. @current-change="ChangePage"
  33. >
  34. </el-pagination>
  35. </div>
  36. <el-dialog :visible.sync="dialogVisible" append-to-body v-el-drag-dialog width="80%" custom-class="prod-verify" title="创建项目信息">
  37. <dataInfo :id="currentDataId" @onClose="onClose"></dataInfo>
  38. </el-dialog>
  39. </div>
  40. </template>
  41. <script>
  42. import{searchProject,deleteProject} from'@/api/project';
  43. import dataInfo from './dataInfo.vue';
  44. import elDragDialog from '@/directive/el-drag-dialog'
  45. export default{
  46. components:{
  47. dataInfo,
  48. },
  49. directives: { elDragDialog },
  50. props:{
  51. queryForm:{
  52. type:Object,
  53. default:()=>{
  54. return {
  55. page:1,
  56. pageSize:10,
  57. name:'',
  58. category_id:'',
  59. status:'',
  60. }
  61. }
  62. }
  63. },
  64. watch:{
  65. 'queryForm': {
  66. handler: function(val) {
  67. this.search();
  68. },
  69. // immediate: true,//立即执行
  70. deep: true
  71. },
  72. },
  73. data(){
  74. return{
  75. dialogVisible:false,//控制产品审核
  76. currentDataId:0,
  77. recordCount:0,
  78. pageTotal:1,
  79. dataList:[],
  80. currentData:{},
  81. }
  82. },
  83. mounted() {
  84. this.search();
  85. },
  86. methods:{
  87. searchData(){
  88. let _this=this;
  89. _this.dialogVisible=false;
  90. _this.search();
  91. },
  92. btnDelete(e){
  93. let _this=this;
  94. let par={
  95. id:e,
  96. }
  97. _this.$confirm("您是否确认删除该记录?","提示",{
  98. confirmButtonText: '确认',
  99. cancelButtonText: '取消',
  100. type: 'warning',
  101. }).then((res)=>{
  102. // console.log("AAA")
  103. deleteProject(par).then(res=>{
  104. _this.search();
  105. })
  106. }).catch(()=>{
  107. })
  108. },
  109. //编辑
  110. btnEdit(e){
  111. let _this=this;
  112. _this.currentDataId=e.id;
  113. _this.dialogVisible=true;
  114. },
  115. onClose(){
  116. let _this=this;
  117. _this.currentDataId=0;
  118. _this.dialogVisible=false;
  119. _this.search();
  120. },
  121. //搜索
  122. search(){
  123. let _this=this;
  124. searchProject(_this.queryForm).then(res=>{
  125. if(!res)return;
  126. _this.dataList=res.data.dataList;
  127. _this.recordCount=res.data.totalRecord;
  128. _this.pageTotal=res.data.totalPage;
  129. })
  130. },
  131. //修改分页
  132. ChangePage(e){
  133. let _this=this;
  134. _this.queryForm.page=e;
  135. _this.search();
  136. },
  137. }
  138. }
  139. </script>
  140. <style lang="scss">
  141. @import './dataList.scss';
  142. </style>