You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

388 lines
11 KiB

  1. <template>
  2. <view class="page">
  3. <!-- 主列表页 -->
  4. <view
  5. :class="sideOpen ? 'show' : ''"
  6. class="mainpage"
  7. style="padding-top: 80rpx"
  8. >
  9. <!-- 顶部条目/分页信息栏 -->
  10. <l-customlist-banner @buttonClick="sideOpen = true">{{
  11. tips
  12. }}</l-customlist-banner>
  13. <!-- 滚动列表,跨端支持上拉/下拉 -->
  14. <l-scroll-list
  15. v-if="ready"
  16. @pullDown="pullDown"
  17. @toBottom="fetchList()"
  18. ref="list"
  19. >
  20. <l-customlist :tips="loadState" showTips>
  21. <!-- 单条记录 -->
  22. <view class="customlist-item" v-for="item of list" :key="item.Id">
  23. <view class="customlist-item-field">
  24. <text class="customlist-item-field-title">会议主题:</text>
  25. {{ displayListItem(item, "MeetingTitle") }}
  26. </view>
  27. <view class="customlist-item-field">
  28. <text class="customlist-item-field-title">会议地点:</text>
  29. {{ displayListItem(item, "MeetingPlace") }}
  30. </view>
  31. <view class="customlist-item-field">
  32. <text class="customlist-item-field-title">开始时间:</text>
  33. {{ displayListItem(item, "BeginTime") }}
  34. </view>
  35. <view class="customlist-item-field">
  36. <text class="customlist-item-field-title">结束时间:</text>
  37. {{ displayListItem(item, "EndTime") }}
  38. </view>
  39. <view class="customlist-item-field">
  40. <text class="customlist-item-field-title">申请人:</text>
  41. {{ displayListItem(item, "CreateUser") }}
  42. </view>
  43. <view class="customlist-item-field">
  44. <text class="customlist-item-field-title">会议记录者:</text>
  45. {{ displayListItem(item, "RecordPerson") }}
  46. </view>
  47. <view class="customlist-item-field">
  48. <text class="customlist-item-field-title">会议内容:</text>
  49. {{ displayListItem(item, "Content") }}
  50. </view>
  51. <view class="customlist-item-field">
  52. <text class="customlist-item-field-title">附件上传:</text>
  53. {{ displayListItem(item, "Files") }}
  54. </view>
  55. <l-customlist-action
  56. showButton
  57. buttonText="会议纪要"
  58. @join="action('join', item.Id)"
  59. showEdit
  60. @edit="action('edit', item.Id)"
  61. showDelete
  62. @delete="action('delete', item.Id)"
  63. @view="action('view', item.Id)"
  64. />
  65. </view>
  66. </l-customlist>
  67. </l-scroll-list>
  68. </view>
  69. <!-- 关闭侧边抽屉按钮 -->
  70. <view
  71. @click="sideOpen = false"
  72. :class="sideOpen ? 'show' : ''"
  73. class="sideclose"
  74. >
  75. <l-icon type="pullright" color="blue" />
  76. </view>
  77. <!-- 侧边栏,用于设置查询条件 -->
  78. <scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y>
  79. <view v-if="ready" class="padding">
  80. <l-input
  81. v-model="queryData.MeetingTitle"
  82. @change="searchChange"
  83. title="会议主题"
  84. placeholder="按会议主题查询"
  85. />
  86. <l-select
  87. v-model="queryData.MeetingPlace"
  88. @change="searchChange"
  89. :range="dataSource.MeetingPlace"
  90. title="会议地点"
  91. placeholder="按会议地点查询"
  92. />
  93. <l-organize-picker
  94. v-model="queryData.CreateUser"
  95. @change="searchChange"
  96. type="user"
  97. title="申请人"
  98. placeholder="按申请人查询"
  99. />
  100. <!-- 重置查询条件按钮 -->
  101. <view class="padding-tb">
  102. <l-button @click="reset" line="orange" class="block" block
  103. >重置查询条件</l-button
  104. >
  105. </view>
  106. </view>
  107. </scroll-view>
  108. <l-customlist-add v-if="!sideOpen" @click="action('add')" />
  109. </view>
  110. </template>
  111. <script>
  112. /*
  113. * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn)
  114. * Copyright (c) 2013-2021 上海力软信息技术有限公司
  115. * 创建人:超级管理员
  116. * 日 期:2021-02-21 10:07
  117. * 描 述:会议管理
  118. */
  119. /**
  120. * 本段代码由移动端代码生成器输出,移动端须 2.2.0 版本及以上可以使用
  121. * 请在移动端 /pages.json 中的 pages 字段中添加一条记录:
  122. * { "path": "pages/PersonnelManagement/MeetingManagement/list", "style": { "navigationBarTitleText": "表单列表页" } }
  123. *
  124. * (navigationBarTitleText 字段为本页面的标题文本,可以修改)
  125. * (必须自行操作该步骤,力软代码生成器不会自动帮您修改 /pages.json 文件)
  126. */
  127. import moment from "moment";
  128. import get from "lodash/get";
  129. import set from "lodash/set";
  130. import pickBy from "lodash/pickBy";
  131. import mapValues from "lodash/mapValues";
  132. export default {
  133. data() {
  134. return {
  135. // 数据项的数据类型、结构
  136. scheme: {
  137. MeetingTitle: { type: "text" },
  138. MeetingPlace: { type: "select", dataSource: "0" },
  139. BeginTime: { type: "datetime", dateformat: "0" },
  140. EndTime: { type: "datetime", dateformat: "0" },
  141. RecordPerson: { type: "organize", dataType: "user" },
  142. Content: { type: "texteditor" },
  143. Files: { type: "upload" },
  144. CreateUser: { type: "organize", dataType: "user" },
  145. },
  146. // 查询条件
  147. searchData: {},
  148. defaultQueryData: {},
  149. queryData: {
  150. MeetingTitle: "",
  151. MeetingPlace: "",
  152. CreateUser: "",
  153. },
  154. // 数据源
  155. dataSource: {
  156. MeetingPlace: [],
  157. },
  158. // 页面相关参数
  159. ready: false,
  160. tips: "加载中...",
  161. loadState: "向下翻以加载更多",
  162. sideOpen: false,
  163. // 列表与分页信息
  164. page: 1,
  165. total: 2,
  166. list: [],
  167. };
  168. },
  169. async onLoad() {
  170. await this.init();
  171. },
  172. onUnload() {
  173. this.OFF("PersonnelManagementMeetingManagement-list-change");
  174. },
  175. methods: {
  176. // 页面初始化
  177. async init() {
  178. this.ON(
  179. "PersonnelManagementMeetingManagement-list-change",
  180. this.refreshList
  181. );
  182. // 拉取加载列表和数据源
  183. await Promise.all([
  184. this.HTTP_GET("learun/adms/PersonnelManagement/MeetingManagement/conferenceroomlist",{},"获取会议场地出错").then(success=>{
  185. if(success){
  186. this.dataSource.MeetingPlace=success.map(t=>({text:t.Name,value:t.ID}));
  187. }
  188. }),
  189. () => {},
  190. ]);
  191. await this.fetchList();
  192. // 初始化查询条件
  193. this.defaultQueryData = this.COPY(this.queryData);
  194. this.ready = true;
  195. },
  196. // 拉取列表
  197. async fetchList() {
  198. if (this.page > this.total) {
  199. return;
  200. }
  201. const result = await this.HTTP_GET(
  202. "learun/adms/PersonnelManagement/MeetingManagement/pagelist",
  203. {
  204. // 这里 sidx 表示排序字段,sord 表示排序方式(DESC=降序,ASC=升序)
  205. // 代码生成器生成时默认按照主键排序,您可以修改成按创建时间的字段降序
  206. pagination: { rows: 10, page: this.page, sidx: "CreateTime desc", sord: "DESC" },
  207. queryJson: JSON.stringify(this.searchData),
  208. },
  209. "加载数据时出错"
  210. );
  211. if (!result) {
  212. return;
  213. }
  214. this.total = result.total;
  215. this.page = result.page + 1;
  216. this.list = this.list.concat(result.rows);
  217. this.tips = `已加载 ${Math.min(result.page, result.total)} / ${
  218. result.total
  219. } 页,共 ${result.records} 项`;
  220. this.loadState =
  221. result.page >= result.total ? "已加载所有项目" : "向下翻以加载更多";
  222. },
  223. // 刷新清空列表
  224. async refreshList() {
  225. this.page = 1;
  226. this.total = 2;
  227. this.list = [];
  228. await this.fetchList();
  229. },
  230. // 列表下拉
  231. pullDown() {
  232. this.refreshList().then(() => {
  233. this.$refs.list.stopPullDown();
  234. });
  235. },
  236. // 设置搜索条件
  237. async searchChange() {
  238. const result = {};
  239. // 将其他查询项添加到查询 JSON 中
  240. const queryObj = pickBy(this.queryData, (t) =>
  241. Array.isArray(t) ? t.length > 0 : t
  242. );
  243. Object.assign(
  244. result,
  245. mapValues(queryObj, (t) => (Array.isArray(t) ? t.join(",") : t))
  246. );
  247. this.searchData = result;
  248. await this.refreshList();
  249. },
  250. // 点击「清空查询条件」按钮
  251. reset() {
  252. this.queryData = this.COPY(this.defaultQueryData);
  253. this.searchChange();
  254. },
  255. // 点击「编辑」、「查看」、「添加」、「删除」按钮
  256. async action(type, id = "") {
  257. switch (type) {
  258. case "view":
  259. this.NAV_TO(`./single?type=view&id=${id}`);
  260. return;
  261. case "add":
  262. this.NAV_TO("./single?type=create");
  263. return;
  264. case "edit":
  265. this.NAV_TO(`./single?type=edit&id=${id}`);
  266. return;
  267. case "join":
  268. console.log(123);
  269. this.NAV_TO(`/pages/PersonnelManagement/MeetingMinutes/list?meetId=${id}`);
  270. return;
  271. case "delete":
  272. if (!(await this.CONFIRM("删除项目", "确定要删除该项吗?", true))) {
  273. return;
  274. }
  275. this.HTTP_POST(
  276. "learun/adms/PersonnelManagement/MeetingManagement/delete",
  277. id,
  278. "删除失败"
  279. ).then((success) => {
  280. if (!success) {
  281. return;
  282. }
  283. this.TOAST("删除成功", "success");
  284. this.refreshList();
  285. });
  286. return;
  287. default:
  288. return;
  289. }
  290. },
  291. // 显示列表中的标题项
  292. displayListItem(item, field) {
  293. const fieldItem = this.scheme[field];
  294. const value = item[field];
  295. switch (fieldItem.type) {
  296. case "currentInfo":
  297. case "organize":
  298. return fieldItem.dataType === "time"
  299. ? value
  300. : get(this.GET_GLOBAL(fieldItem.dataType), `${value}.name`, "");
  301. case "radio":
  302. case "select":
  303. const selectItem = this.dataSource[field].find(
  304. (t) => t.value === String(value)
  305. );
  306. return get(selectItem, "text", "");
  307. case "checkbox":
  308. if (!value || value.split(",").length <= 0) {
  309. return "";
  310. }
  311. const checkboxItems = value.split(",");
  312. return this.dataSource[field]
  313. .filter((t) => checkboxItems.includes(t.value))
  314. .map((t) => t.text)
  315. .join(",");
  316. case "datetime":
  317. if (!value) {
  318. return "";
  319. }
  320. return moment(value).format(
  321. Number(fieldItem.dateformat) === 0
  322. ? "YYYY年 M月 D日"
  323. : "YYYY-MM-DD HH:mm"
  324. );
  325. default:
  326. return value === null || value === undefined ? "" : value;
  327. }
  328. },
  329. },
  330. };
  331. </script>
  332. <style lang="less" scoped>
  333. @import "~@/common/css/sidepage.less";
  334. @import "~@/common/css/customlist.less";
  335. </style>