index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. <template>
  2. <view class="uni-container uni-container-bg">
  3. <view class="example container" :style="'height: ' + (screenHeight - 100) + 'px'">
  4. <!-- 搜索框 -->
  5. <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
  6. <uni-col :span="24">
  7. <view class="u-page__tag-item">
  8. <u-search placeholder="请输入人员姓名" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="keyword"
  9. :show-action="true" @custom="search"></u-search>
  10. </view>
  11. </uni-col>
  12. </uni-row>
  13. <!-- 下拉框 -->
  14. <view class="u-page__tag-item"
  15. style="margin-bottom: 26upx;width: 700upx;border-bottom: 2px solid #55cbbf;background-color: #f5f7fa;">
  16. <u-form>
  17. <u-form-item prop="orgName" @click="
  18. showOrg = true;
  19. hideKeyboard();
  20. " label="单位选择:" labelWidth="100px">
  21. <u--input border="none" disabled v-model="formData.orgName" placeholder="请选择所属单位"></u--input>
  22. <u-icon slot="right" name="arrow-down"></u-icon>
  23. </u-form-item>
  24. </u-form>
  25. </view>
  26. <!-- 卡片栏 -->
  27. <view v-if="tableData.length>0 && isLoaded" style="margin-bottom: 120rpx">
  28. <view v-for="(item, index) in tableData" :key="index"
  29. v-if="formData.orgName === item.orgName || formData.orgId === item.orgId">
  30. <uni-card>
  31. <!-- 简要内容 -->
  32. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  33. <text class="name-align-drill">动火执行人:</text>
  34. <text class="conts">{{ item.executor }}</text>
  35. </view>
  36. <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
  37. <text class="name-align-drill">动火事由:</text>
  38. <text class="conts">{{ item.workReason }}</text>
  39. </view>
  40. <view style="margin-top: 80rpx;">
  41. <!-- 删除按钮 -->
  42. <view class="an-niu" @click.native="showModal(item.id)" v-if="item.workStatus=='未审核'||item.workStatus=='0'">
  43. <text class="detailDel">删除</text>
  44. </view>
  45. <view @click.native="onClick(item.id)" link class="an-niu" ><text class="detail">查看详情</text>
  46. </view>
  47. <view @click.native="editClick(item.id)" link class="an-niu" ><text class="solve"
  48. v-if="item.workStatus=='未审核'||item.workStatus=='0'">编辑</text>
  49. </view>
  50. <view @click.native="processClick(item.id)" link class="an-niu" v-if="item.workStatus=='未审核'&&juese=='fire_leader'||item.workStatus=='0'&&juese=='fire_leader'"><text class="solve"
  51. >审核</text>
  52. </view>
  53. </view>
  54. </uni-card>
  55. </view>
  56. </view>
  57. <!-- tableData为空时显示 -->
  58. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  59. <view class="text-gray" style="padding-top: 20px;">
  60. <img :src="tan90" alt="暂无数据" />
  61. </view>
  62. </view>
  63. <view>
  64. <image :src="Group" @click="addClick" class="tiantupian"></image>
  65. </view>
  66. <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
  67. @select="sexSelect"></u-action-sheet>
  68. <u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
  69. showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal"></u-modal>
  70. <u-modal title="审核是否通过" :show="showShenHe" showCancelButton closeOnClickOverlay confirmText="审核通过"
  71. cancelText="审核不通过" @confirm="confirmShenHe" :closeOnClickOverlay="true" @cancel="cancelShenHe" @close="close">
  72. </u-modal>
  73. <!-- 加载中 -->
  74. <isLodingModel></isLodingModel>
  75. </view>
  76. </view>
  77. </template>
  78. <script>
  79. var that = '';
  80. import {
  81. getOrgId //获取orgId
  82. } from '@/api/architecture';
  83. import {
  84. fireWorkPage,
  85. fireWorkUpdate,
  86. fireWorkDelete,
  87. fireWorkShenHe
  88. } from '@/api/fireSpecial';
  89. import config from '@/config'
  90. const baseUrlImg = config.baseUrlImg
  91. export default {
  92. data() {
  93. return {
  94. showShenHe:false,
  95. screenHeight: this.$screenHeight,
  96. wheight: '',
  97. keyword: '',
  98. isLoaded: false,
  99. Group: `${baseUrlImg}/checkActive/Group.png`,
  100. showOrg: false,
  101. actions: [],
  102. // 数据
  103. tableData: {},
  104. title: '是否删除该数据项?',
  105. content: '确认删除?',
  106. id: '',
  107. tan90: `${baseUrlImg}/tan90.png`,
  108. // 每页数据量
  109. pageSize: 5,
  110. // 当前页
  111. pageNo: 1,
  112. // 数据总量
  113. total: 0,
  114. // tableData数据加载中
  115. loading: false,
  116. // 初始化时搜索框的值
  117. keyword: '',
  118. // 存放orgid,orgname
  119. formData: {},
  120. show: false,
  121. showtimeStart: false,
  122. showtimeEnd: false,
  123. juese: {},
  124. ShenHeids:''
  125. };
  126. },
  127. // 在 vue页面,向起始页通过事件传递数据
  128. onLoad: function(option) {
  129. // this.init();
  130. },
  131. watch: {
  132. loading: {
  133. handler(newLength, oldLength) {
  134. this.$modal.isLoadingModel(this.loading)
  135. },
  136. immediate: true
  137. }
  138. },
  139. onShow() {
  140. this.actions = []
  141. that = this;
  142. this.juese=uni.getStorageSync('getUserInfo_key').userRoles.appRoles[0].role_lable
  143. getOrgId({
  144. pageNo: this.pageNo,
  145. pageSize: this.pageSize,
  146. userId: this.$store.state.user.id
  147. }).then(response => {
  148. console.log(response, 'response');
  149. // 取到用户对应的单位名称与id
  150. response.data.map(v => {
  151. this.actions.push({
  152. id: v.dwid,
  153. name: v.orgName
  154. });
  155. });
  156. console.log(response.data, '21321312');
  157. this.formData.orgName = response.data[0].orgName ? response.data[0].orgName : '';
  158. this.formData.orgId = response.data[0].dwid;
  159. this.tableData = []
  160. this.getData();
  161. });
  162. },
  163. onReady() {},
  164. mixins: [uni.$u.mixin],
  165. methods: {
  166. processClick(ShenHeids) { //审核
  167. this.showShenHe=true
  168. this.ShenHeids=ShenHeids
  169. },
  170. //审核通过
  171. confirmShenHe() {
  172. this.showShenHe = false
  173. fireWorkShenHe({ids:this.ShenHeids
  174. }).then(response => {
  175. this.tableData = []
  176. this.getData()
  177. })
  178. },
  179. //审核不通过
  180. cancelShenHe() {
  181. this.showShenHe = false
  182. },
  183. search(val) {
  184. console.log(val, 'valvals', this.formData);
  185. this.tableData = []
  186. this.getData()
  187. },
  188. async init() {
  189. var t = this;
  190. t.$.getlocation()
  191. .then(res => {
  192. console.log(res, 'res');
  193. })
  194. .catch(err => {
  195. console.log(err, 'err');
  196. });
  197. },
  198. // 模态框内容
  199. showModal(val) {
  200. this.show = true;
  201. this.id = val;
  202. console.log(val, 'val.id');
  203. },
  204. confirm() {
  205. this.show = false;
  206. fireWorkDelete({
  207. id: this.id
  208. }).then(response => {
  209. this.loading = true;
  210. this.isLoaded = false
  211. this.tableData = []
  212. this.getData();
  213. console.log(this.tableData, '获取建筑信息详细信息获取建筑信息详细信息获取建筑信息详细信息获取建筑信息详细信息');
  214. });
  215. },
  216. close() {
  217. this.show = false;
  218. console.log('close');
  219. },
  220. cancel() {
  221. this.show = false;
  222. console.log('cancel');
  223. },
  224. //查看详情
  225. addClickDetail(val) {
  226. uni.navigateTo({
  227. url: `/pagesA/fire/architecture/add_architecture/add_architecture?item=${JSON.stringify(val)}`
  228. });
  229. },
  230. // 获取数据
  231. getData() {
  232. this.loading = true;
  233. // 获取建筑信息详细信息
  234. let arrOrg = []
  235. arrOrg.push(this.formData.orgId)
  236. fireWorkPage({
  237. pageNo: this.pageNo,
  238. pageSize: this.pageSize,
  239. orgIds: arrOrg,
  240. executor: this.keyword
  241. }).then(response => {
  242. console.log(response, 'sdsdsd');
  243. this.isLoaded = true
  244. this.tableData = response.data ? [...this.tableData, ...response.data.list] : []
  245. this.total = response.data ? response.data.total : 0
  246. this.loading = false
  247. });
  248. },
  249. // 传递数据
  250. onClick(val) {
  251. this.isLoaded = false
  252. uni.navigateTo({
  253. url: `/pagesB/fire/fireWork/addWork/index?title=查看动火审批&&viewData=${val}`
  254. })
  255. },
  256. editClick(val) {
  257. this.isLoaded = false
  258. uni.navigateTo({
  259. url: `/pagesB/fire/fireWork/addWork/index?title=编辑动火审批&&editData=${val}&&orgaction=${JSON.stringify(this.actions)}`
  260. })
  261. },
  262. addClick() {
  263. this.isLoaded = false
  264. uni.navigateTo({
  265. url: `/pagesB/fire/fireWork/addWork/index?title=新增动火审批&&orgName=${this.formData.orgName}&&orgId=${this.formData.orgId}&&orgaction=${JSON.stringify(this.actions)}`
  266. });
  267. },
  268. sexSelect(e) {
  269. this.formData.orgId = e.id;
  270. this.formData.orgName = e.name;
  271. this.getData()
  272. },
  273. // 触底的事件
  274. onReachBottom() {
  275. // 判断是否还有下一页数据
  276. if (this.pageNo * this.pageSize >= this.total)
  277. return uni.showToast({
  278. title: `数据加载完毕`
  279. });
  280. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  281. if (this.loading) return;
  282. this.pageNo += 1;
  283. this.getData(this.pageNo);
  284. },
  285. // 隐藏键盘
  286. hideKeyboard() {
  287. uni.hideKeyboard();
  288. },
  289. }
  290. };
  291. </script>
  292. <style lang="scss" scoped>
  293. body {
  294. background-color: #f5f7f9;
  295. }
  296. page {
  297. background-color: #f5f7f9;
  298. }
  299. /deep/ .u-tabs__wrapper[data-v-0de61367],
  300. .u-tabs__wrapper.data-v-0de61367 {
  301. width: 99%;
  302. }
  303. .uni-container {
  304. height: 100vh;
  305. padding-right: 20upx;
  306. }
  307. .addInsp {
  308. width: 40px;
  309. position: fixed;
  310. right: 4px;
  311. z-index: 99999;
  312. }
  313. ::v-deep .u-icon__icon {
  314. margin-right: 0px !important;
  315. }
  316. .an-niu {
  317. float: right;
  318. font-size: 10px;
  319. text-align: center;
  320. display: flex;
  321. margin-top: -64upx;
  322. padding-bottom: 30rpx;
  323. // margin-top: 50rpx;
  324. color: #fff;
  325. .detail {
  326. width: 60px;
  327. height: 60rpx;
  328. padding: 0 20rpx;
  329. border-radius: 30px;
  330. background-color: #f7c41e;
  331. margin-right: 20rpx;
  332. text-align: center;
  333. line-height: 60rpx;
  334. font-size: 27upx;
  335. }
  336. .detailDel {
  337. width: 60px;
  338. height: 60rpx;
  339. // padding: 0 20rpx;
  340. border-radius: 30px;
  341. background-color: #ff2e31;
  342. color: white;
  343. margin-right: 20rpx;
  344. text-align: center;
  345. line-height: 60rpx;
  346. font-size: 30upx;
  347. }
  348. .solve {
  349. width: 62px;
  350. height: 60rpx;
  351. margin-right: 20rpx;
  352. border-radius: 30px;
  353. background-color: #4cb2b6;
  354. line-height: 60rpx;
  355. }
  356. /deep/ .padding-tb-sm {
  357. padding-top: 0px;
  358. padding-bottom: 10px;
  359. }
  360. .deletes {
  361. width: 62px;
  362. height: 60rpx;
  363. border-radius: 60rpx;
  364. background-color: red;
  365. color: #fff;
  366. line-height: 60rpx;
  367. }
  368. }
  369. /deep/.segmented-control__item--button {
  370. background-color: rgb(76, 178, 182) !important;
  371. }
  372. /deep/.segmented-control__item--button--active {
  373. background-color: #ffffff !important;
  374. }
  375. /deep/.uni-card {
  376. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  377. border-radius: 30rpx;
  378. }
  379. .tiantupian {
  380. width: 110rpx;
  381. height: 110rpx;
  382. position: fixed;
  383. right: 15px;
  384. bottom: 30rpx;
  385. }
  386. //列表样式
  387. .titles {
  388. font-weight: 600;
  389. margin-bottom: 10rpx;
  390. color: black;
  391. font-size: 32rpx;
  392. }
  393. /deep/ .u-form-item__body__left__content__label {
  394. font-size: 28upx !important;
  395. }
  396. .conts {
  397. max-width: 470upx;
  398. display: -webkit-box;
  399. /*弹性伸缩盒子模型显示*/
  400. -webkit-box-orient: vertical;
  401. /*排列方式*/
  402. -webkit-line-clamp: 1;
  403. /*显示文本行数*/
  404. overflow: hidden;
  405. /*溢出隐藏*/
  406. color: #274647;
  407. text-overflow: ellipsis;
  408. }
  409. .max-width {
  410. max-width: 180upx;
  411. }
  412. /deep/.u-action-sheet {
  413. overflow-y: auto;
  414. height: 1000rpx;
  415. background-color: #fff;
  416. }
  417. .example {
  418. overflow-y: auto;
  419. }
  420. </style>