useGasCheck.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <!--用气审核-->
  2. <template>
  3. <div class="app-container approval_handle">
  4. <div class="approval_handle-page" v-if="pageType==1">
  5. <template>
  6. <el-tabs v-model="activeName" @tab-click="handleTabClick">
  7. <el-tab-pane label="待审核(10)" name="1"></el-tab-pane>
  8. <el-tab-pane label="已通过(99)" name="2"></el-tab-pane>
  9. <el-tab-pane label="未通过(9)" name="3"></el-tab-pane>
  10. </el-tabs>
  11. </template>
  12. <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true">
  13. <el-form-item label="关键字" prop="safetyPrecautions" >
  14. <el-input v-model="form.safetyPrecautions" placeholder="申请人/联系电话" maxlength="50" />
  15. </el-form-item>
  16. <el-form-item>
  17. <p class="inquire-button-one" @click="handleQuery">查询</p>
  18. <p class="reset-button-one" @click="resetQuery">重置</p>
  19. </el-form-item>
  20. </el-form>
  21. <el-table border v-loading="loading" :data="tableData">
  22. <el-table-column label="申请人" align="left" prop="location"/>
  23. <el-table-column label="联系方式" align="left" prop="createTime"></el-table-column>
  24. <el-table-column label="使用气体" align="left" prop="createTime"></el-table-column>
  25. <el-table-column label="申请时间" align="left" prop="createTime"></el-table-column>
  26. <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
  27. <template slot-scope="scope">
  28. <div class="button-box">
  29. <p class="table-min-button"
  30. v-if="activeName==1"
  31. v-hasPermi="['airbottle:taskManage:query']"
  32. @click="handleClick('',scope.row,'check')"
  33. >审核</p>
  34. <p class="table-min-button"
  35. v-if="activeName==2 || activeName==3"
  36. v-hasPermi="['airbottle:taskManage:query']"
  37. @click="handleClick('',scope.row,'detail')"
  38. >详情</p>
  39. </div>
  40. </template>
  41. </el-table-column>
  42. </el-table>
  43. <pagination :page-sizes="[20, 30, 40, 50]"
  44. :total="total"
  45. layout="total, prev, pager, next, sizes, jumper"
  46. :page.sync="queryParams.pageNum"
  47. :limit.sync="queryParams.pageSize"
  48. @pagination="getList"
  49. />
  50. </div>
  51. <!--详情页面-->
  52. <detail-page v-if="pageType==2" :pageData2="pageData2"></detail-page>
  53. </div>
  54. </template>
  55. <script>
  56. import { gasApplyList, } from '@/api/gasManage3_0/gasManage'
  57. import { getToken } from "@/utils/auth";
  58. import detailPage from '@/views/gasManage_syd/useGasCheck/useGasCheckDetail'
  59. export default {
  60. name: "Approval",
  61. components: {
  62. detailPage
  63. },
  64. data() {
  65. return {
  66. activeName:'1',
  67. //页面状态
  68. pageType:1,
  69. loading:false,
  70. headers: {
  71. Authorization: "Bearer " + getToken()
  72. },
  73. // 查询参数
  74. queryParams: {
  75. pageNum: 1,
  76. pageSize:20,
  77. remark:'login',
  78. searchValue:'',
  79. startTime:'',
  80. endTime:'',
  81. },
  82. total:0,
  83. tableData:[{}],
  84. dateRange:[],
  85. pageData2:{},
  86. form:{
  87. },
  88. rules:{
  89. txt:[
  90. {required: true, message: '请输入播放文字', trigger: 'blur'},
  91. { required: true, message: "请输入播放文字", validator: this.spaceJudgment, trigger: "blur" }
  92. ],
  93. },
  94. };
  95. },
  96. methods: {
  97. handleTabClick(tab, event) {
  98. console.log(tab, event);
  99. },
  100. handleClick(index,row,doType){
  101. let _this=this;
  102. if(doType=='check'){//审核
  103. this.pageType=2;
  104. _this.pageData2.status=0;
  105. _this.pageData2.id=row.id;
  106. }else if(doType=='detail'){//详情
  107. this.pageType=2;
  108. _this.pageData2.status=1;
  109. _this.pageData2.id=row.id;
  110. }else if(doType=='back'){//详情
  111. this.pageType=1;
  112. }
  113. },
  114. /** 搜索按钮操作 */
  115. handleQuery() {
  116. this.queryParams.pageNum = 1;
  117. this.getList();
  118. },
  119. /** 重置按钮操作 */
  120. resetQuery() {
  121. this.queryParams.searchValue = "";
  122. this.dateRange=[];
  123. this.queryParams.startTime=null;
  124. this.queryParams.endTime=null
  125. this.handleQuery();
  126. },
  127. // 取消按钮
  128. cancel() {
  129. this.form = {};
  130. this.dialogVisible = false;
  131. },
  132. /*提交*/
  133. submitForm(){
  134. this.$refs["form"].validate(valid => {
  135. if (valid) {
  136. let id = this.subId;
  137. }
  138. });
  139. },
  140. getList(){
  141. let _this=this;
  142. if(this.dateRange&&this.dateRange.length>0) {
  143. this.queryParams.startTime=this.dateRange[0]
  144. this.queryParams.endTime=this.dateRange[1]
  145. } else {
  146. this.queryParams.startTime=null;
  147. this.queryParams.endTime=null
  148. }
  149. gasApplyList(_this.queryParams).then( response => {
  150. let res=response.rows;
  151. //_this.tableData=res;
  152. _this.total=response.total;
  153. });
  154. },
  155. },
  156. mounted() {
  157. this.getList()
  158. }
  159. };
  160. </script>
  161. <style scoped lang="scss">
  162. .approval_handle {
  163. display: flex!important;
  164. flex-direction: column;
  165. .approval_handle-page{
  166. flex:1;
  167. display: flex!important;
  168. flex-direction: column;
  169. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  170. padding:20px 20px 20px!important;
  171. border-radius:10px;
  172. .button-box{
  173. width:200px;
  174. display: flex;
  175. }
  176. }
  177. }
  178. </style>