user.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <script>
  2. import { initParams } from "./utils/init-something";
  3. import { list } from "./api/index";
  4. export default {
  5. name: "UserInputDialog",
  6. props: ["title"],
  7. components: {},
  8. data() {
  9. const columns = [
  10. {
  11. key: "userName",
  12. title: "员工姓名",
  13. type: "Input",
  14. search: true,
  15. },
  16. {
  17. key: "userId",
  18. title: "员工编码",
  19. type: "Input",
  20. search: true,
  21. },
  22. {
  23. key: "orgName",
  24. title: "任职(兼职)组织",
  25. type: "Input",
  26. width: 200,
  27. },
  28. {
  29. key: "deptName",
  30. title: "部门",
  31. type: "Input",
  32. width: 200,
  33. },
  34. {
  35. key: "",
  36. title: "岗位",
  37. type: "Input",
  38. },
  39. {
  40. key: "email",
  41. title: "邮箱",
  42. type: "Input",
  43. width: 200,
  44. },
  45. {
  46. key: "",
  47. title: "职位",
  48. type: "Input",
  49. },
  50. ];
  51. const initTableColumns = () => columns.filter((column) => column.key);
  52. const initSearchColumns = () => columns.filter((column) => column.search);
  53. return {
  54. // global
  55. size: "mini",
  56. width: "50%",
  57. page: { pageNum: 1, pageSize: 25, total: 0 },
  58. pageSizes: [25, 50],
  59. layout: "prev, pager, next, jumper",
  60. api: "puPersonnel",
  61. showKey: "userName",
  62. // dialog
  63. visible: false,
  64. loading: false,
  65. // search
  66. searchColumns: initSearchColumns(),
  67. params: initParams(initSearchColumns()),
  68. // table
  69. tableColumns: initTableColumns(),
  70. data: [],
  71. currentData: null,
  72. };
  73. },
  74. computed: {},
  75. watch: {},
  76. methods: {
  77. // set dialog visible
  78. setVisible(prop) {
  79. this.visible = prop;
  80. },
  81. // do something before dialog open
  82. beforeOpen() {
  83. const { value } = this.$props;
  84. this.params[this.showKey] = value;
  85. this.fetchList(this.params, this.page);
  86. },
  87. // fetch table data
  88. async fetchList(prop, page) {
  89. try {
  90. this.loading = true;
  91. const { pageNum, pageSize } = page;
  92. const { code, msg, rows, total } = await list(this.api, {
  93. ...prop,
  94. pageNum,
  95. pageSize,
  96. });
  97. if (code === 200) {
  98. this.data = rows;
  99. this.page.total = total;
  100. this.$notify.success({ title: msg });
  101. } else {
  102. this.$notify.warning({ title: msg });
  103. }
  104. } catch (err) {
  105. this.$notify.error({ title: "error", message: err });
  106. } finally {
  107. this.loading = false;
  108. this.setCurrentData(
  109. this.data.find(
  110. (column) => column[this.showKey] === this.currentData[this.showKey]
  111. )
  112. );
  113. }
  114. },
  115. // setting up to fetch table data
  116. queryList() {
  117. this.fetchList(this.params, this.page);
  118. },
  119. // reset to fetch table data
  120. resetList() {
  121. this.page.pageNum = 1;
  122. this.params = initParams(this.searchColumns);
  123. this.fetchList(this.params, this.page);
  124. },
  125. // size change to fetch table data
  126. pageSizeChange(prop) {
  127. this.page.pageSize = prop;
  128. this.fetchList(this.params, this.page);
  129. },
  130. // number change to fetch table data
  131. pageNumberChange(prop) {
  132. this.page.pageNum = prop;
  133. this.fetchList(this.params, this.page);
  134. },
  135. // select row data
  136. selectCurrentData(row) {
  137. this.currentData = row;
  138. },
  139. // set row data highlight
  140. setCurrentData(row) {
  141. this.$refs.singleTable.setCurrentRow(row);
  142. },
  143. //
  144. confirm() {
  145. if (this.currentData) {
  146. this.$emit("confirm", this.currentData);
  147. }
  148. this.setVisible(false);
  149. },
  150. },
  151. created() {},
  152. mounted() {},
  153. destroyed() {},
  154. };
  155. </script>
  156. <template>
  157. <el-dialog
  158. :title="title"
  159. :visible.sync="visible"
  160. :width="width"
  161. append-to-body
  162. @open="beforeOpen"
  163. >
  164. <el-form :size="size" :inline="true" :model="params">
  165. <el-form-item
  166. v-for="(column, index) in searchColumns"
  167. :key="index"
  168. :label="column.title"
  169. >
  170. <el-input v-model="params[column.key]" @change="queryList"> </el-input>
  171. </el-form-item>
  172. <el-form-item>
  173. <el-button icon="el-icon-refresh" @click="resetList"></el-button>
  174. </el-form-item>
  175. </el-form>
  176. <el-table
  177. v-loading="loading"
  178. :data="data"
  179. :size="size"
  180. ref="singleTable"
  181. height="45vh"
  182. highlight-current-row
  183. style="width: 100%; margin-bottom: 20px"
  184. @row-click="selectCurrentData"
  185. >
  186. <el-table-column
  187. v-for="(column, index) in tableColumns"
  188. :key="index"
  189. :prop="column.key"
  190. :label="column.title"
  191. :width="column.width"
  192. show-overflow-tooltip
  193. >
  194. </el-table-column>
  195. </el-table>
  196. <div
  197. style="display: flex; justify-content: space-between; align-items: center"
  198. >
  199. <p>
  200. <span style="font-size: 12px">已选择 :</span>
  201. <el-tag v-if="currentData" :size="size">{{
  202. currentData[showKey]
  203. }}</el-tag>
  204. <span v-else>无</span>
  205. </p>
  206. <el-pagination
  207. :layout="layout"
  208. :total="page.total"
  209. :page-sizes="pageSizes"
  210. :page-size="page.pageSize"
  211. :current-page="page.pageNum"
  212. :small="size === 'mini'"
  213. background
  214. @size-change="pageSizeChange"
  215. @current-change="pageNumberChange"
  216. >
  217. </el-pagination>
  218. </div>
  219. <div style="margin-top: 20px; text-align: right">
  220. <el-button :size="size" @click="visible = false">取 消</el-button>
  221. <el-button :size="size" type="primary" @click="confirm">确 定</el-button>
  222. </div>
  223. </el-dialog>
  224. </template>
  225. <style scoped></style>