index.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  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.empName }}</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.numberCode }}</text>
  39. </view>
  40. <view style="margin-top: 80rpx;">
  41. <view class="an-niu" @click.native="onClick(item.id)" link><text class="detail">查看详情</text>
  42. </view>
  43. </view>
  44. </uni-card>
  45. </view>
  46. </view>
  47. <!-- tableData为空时显示 -->
  48. <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
  49. <view class="text-gray" style="padding-top: 20px;">
  50. <img :src="tan90" alt="暂无数据" />
  51. </view>
  52. </view>
  53. <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
  54. @select="sexSelect"></u-action-sheet>
  55. <!-- 加载中 -->
  56. <isLodingModel></isLodingModel>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. var that = '';
  62. import {
  63. getOrgId //获取orgId
  64. } from '@/api/architecture';
  65. import {
  66. fireSpecialPage,
  67. fireSpecialUpdate,
  68. fireSpecialDelete
  69. } from '@/api/fireSpecial';
  70. import config from '@/config'
  71. const baseUrlImg = config.baseUrlImg
  72. export default {
  73. data() {
  74. return {
  75. screenHeight: this.$screenHeight,
  76. wheight: '',
  77. keyword:'',
  78. isLoaded: false,
  79. Group: `${baseUrlImg}/checkActive/Group.png`,
  80. showOrg: false,
  81. actions: [],
  82. // 数据
  83. tableData: {},
  84. id: '',
  85. tan90: `${baseUrlImg}/tan90.png`,
  86. // 每页数据量
  87. pageSize: 5,
  88. // 当前页
  89. pageNo: 1,
  90. // 数据总量
  91. total: 0,
  92. // tableData数据加载中
  93. loading: false,
  94. // 初始化时搜索框的值
  95. keyword: '',
  96. // 存放orgid,orgname
  97. formData: {},
  98. show: false,
  99. showtimeStart: false,
  100. showtimeEnd: false
  101. };
  102. },
  103. // 在 vue页面,向起始页通过事件传递数据
  104. onLoad: function(option) {
  105. // this.init();
  106. },
  107. watch: {
  108. loading: {
  109. handler(newLength, oldLength) {
  110. this.$modal.isLoadingModel(this.loading)
  111. },
  112. immediate: true
  113. }
  114. },
  115. mounted() {
  116. this.actions = []
  117. that = this;
  118. getOrgId({
  119. pageNo: this.pageNo,
  120. pageSize: this.pageSize,
  121. userId: this.$store.state.user.id
  122. }).then(response => {
  123. console.log(response, 'response');
  124. // 取到用户对应的单位名称与id
  125. response.data.map(v => {
  126. this.actions.push({
  127. id: v.dwid,
  128. name: v.orgName
  129. });
  130. });
  131. console.log(response.data, '21321312');
  132. this.formData.orgName = response.data[0].orgName ? response.data[0].orgName : '';
  133. this.formData.orgId = response.data[0].dwid;
  134. this.tableData = []
  135. this.getData();
  136. });
  137. },
  138. onReady() {},
  139. mixins: [uni.$u.mixin],
  140. methods: {
  141. search(val) {
  142. console.log(val, 'valvals',this.formData);
  143. this.tableData = []
  144. this.getData()
  145. },
  146. async init() {
  147. var t = this;
  148. t.$.getlocation()
  149. .then(res => {
  150. console.log(res, 'res');
  151. })
  152. .catch(err => {
  153. console.log(err, 'err');
  154. });
  155. },
  156. //查看详情
  157. addClickDetail(val) {
  158. uni.navigateTo({
  159. url: `/pagesA/fire/architecture/add_architecture/add_architecture?item=${JSON.stringify(val)}`
  160. });
  161. },
  162. // 获取数据
  163. getData() {
  164. this.loading = true;
  165. let arrOrg=[]
  166. arrOrg.push(this.formData.orgId)
  167. fireSpecialPage({
  168. pageNo: this.pageNo,
  169. pageSize: this.pageSize,
  170. orgIds: arrOrg,
  171. empName:this.keyword
  172. }).then(response => {
  173. console.log(response,'sdsdsd');
  174. this.isLoaded = true
  175. this.tableData = response.data?[...this.tableData, ...response.data.list]:[]
  176. this.total = response.data?response.data.total:0
  177. this.loading = false
  178. });
  179. },
  180. // 传递数据
  181. onClick(val) {
  182. this.isLoaded = false
  183. uni.navigateTo({
  184. url: `/pagesB/fire/fireSpecial/addSpecial/index?title=查看特种作业人员&&viewData=${val}`
  185. })
  186. },
  187. sexSelect(e) {
  188. this.formData.orgId = e.id;
  189. this.formData.orgName = e.name;
  190. this.getData()
  191. },
  192. // 触底的事件
  193. onReachBottom() {
  194. // 判断是否还有下一页数据
  195. if (this.pageNo * this.pageSize >= this.total)
  196. return uni.showToast({
  197. title: `数据加载完毕`
  198. });
  199. // 判断是否正在请求其它数据,如果是,则不发起额外的请求
  200. if (this.loading) return;
  201. this.pageNo += 1;
  202. this.getData(this.pageNo);
  203. },
  204. // 隐藏键盘
  205. hideKeyboard() {
  206. uni.hideKeyboard();
  207. },
  208. }
  209. };
  210. </script>
  211. <style lang="scss" scoped>
  212. body {
  213. background-color: #f5f7f9;
  214. }
  215. page {
  216. background-color: #f5f7f9;
  217. }
  218. /deep/ .u-tabs__wrapper[data-v-0de61367],
  219. .u-tabs__wrapper.data-v-0de61367 {
  220. width: 99%;
  221. }
  222. .uni-container {
  223. height: 100vh;
  224. padding-right: 20upx;
  225. }
  226. .addInsp {
  227. width: 40px;
  228. position: fixed;
  229. right: 4px;
  230. z-index: 99999;
  231. }
  232. ::v-deep .u-icon__icon {
  233. margin-right: 0px !important;
  234. }
  235. .an-niu {
  236. float: right;
  237. font-size: 10px;
  238. text-align: center;
  239. display: flex;
  240. margin-top: -64upx;
  241. padding-bottom: 30rpx;
  242. // margin-top: 50rpx;
  243. color: #fff;
  244. .detail {
  245. width: 60px;
  246. height: 60rpx;
  247. padding: 0 20rpx;
  248. border-radius: 30px;
  249. background-color: #f7c41e;
  250. margin-right: 20rpx;
  251. text-align: center;
  252. line-height: 60rpx;
  253. font-size: 27upx;
  254. }
  255. .detailDel {
  256. width: 60px;
  257. height: 60rpx;
  258. padding: 0 20rpx;
  259. border-radius: 30px;
  260. background-color: #ff2e31;
  261. color: white;
  262. margin-right: 20rpx;
  263. text-align: center;
  264. line-height: 60rpx;
  265. font-size: 30upx;
  266. }
  267. .solve {
  268. width: 62px;
  269. height: 60rpx;
  270. margin-right: 20rpx;
  271. border-radius: 30px;
  272. background-color: #4cb2b6;
  273. line-height: 60rpx;
  274. }
  275. /deep/ .padding-tb-sm {
  276. padding-top: 0px;
  277. padding-bottom: 10px;
  278. }
  279. .deletes {
  280. width: 62px;
  281. height: 60rpx;
  282. border-radius: 60rpx;
  283. background-color: red;
  284. color: #fff;
  285. line-height: 60rpx;
  286. }
  287. }
  288. /deep/.segmented-control__item--button {
  289. background-color: rgb(76, 178, 182) !important;
  290. }
  291. /deep/.segmented-control__item--button--active {
  292. background-color: #ffffff !important;
  293. }
  294. /deep/.uni-card {
  295. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
  296. border-radius: 30rpx;
  297. }
  298. .tiantupian {
  299. width: 110rpx;
  300. height: 110rpx;
  301. position: fixed;
  302. right: 15px;
  303. bottom: 30rpx;
  304. }
  305. //列表样式
  306. .titles {
  307. font-weight: 600;
  308. margin-bottom: 10rpx;
  309. color: black;
  310. font-size: 32rpx;
  311. }
  312. /deep/ .u-form-item__body__left__content__label {
  313. font-size: 28upx !important;
  314. }
  315. .conts {
  316. max-width: 470upx;
  317. display: -webkit-box;
  318. /*弹性伸缩盒子模型显示*/
  319. -webkit-box-orient: vertical;
  320. /*排列方式*/
  321. -webkit-line-clamp: 1;
  322. /*显示文本行数*/
  323. overflow: hidden;
  324. /*溢出隐藏*/
  325. color: #274647;
  326. text-overflow: ellipsis;
  327. }
  328. .max-width {
  329. max-width: 180upx;
  330. }
  331. /deep/.u-action-sheet {
  332. overflow-y: auto;
  333. height: 1000rpx;
  334. background-color: #fff;
  335. }
  336. .example {
  337. overflow-y: auto;
  338. }
  339. </style>