index.vue 9.7 KB

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