index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
  4. <el-form-item label="部门名称" prop="deptName">
  5. <el-input
  6. v-model="queryParams.deptName"
  7. placeholder="请输入部门名称"
  8. clearable
  9. @keyup.enter.native="handleQuery"
  10. />
  11. </el-form-item>
  12. <el-form-item label="状态" prop="status">
  13. <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
  14. <el-option
  15. v-for="dict in dict.type.sys_normal_disable"
  16. :key="dict.value"
  17. :label="dict.label"
  18. :value="dict.value"
  19. />
  20. </el-select>
  21. </el-form-item>
  22. <el-form-item>
  23. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  24. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  25. </el-form-item>
  26. </el-form>
  27. <el-row :gutter="10" class="mb8">
  28. <el-col :span="1.5">
  29. <el-button
  30. type="primary"
  31. plain
  32. icon="el-icon-plus"
  33. size="mini"
  34. @click="handleAdd"
  35. v-hasPermi="['system:dept:add']"
  36. >新增</el-button>
  37. </el-col>
  38. <el-col :span="1.5">
  39. <el-button
  40. type="info"
  41. plain
  42. icon="el-icon-sort"
  43. size="mini"
  44. @click="toggleExpandAll"
  45. >展开/折叠</el-button>
  46. </el-col>
  47. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  48. </el-row>
  49. <el-table
  50. v-if="refreshTable"
  51. v-loading="loading"
  52. :data="deptList"
  53. row-key="deptId"
  54. :default-expand-all="isExpandAll"
  55. :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  56. >
  57. <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
  58. <!-- <el-table-column prop="deptName" label="公司名称" width="260"></el-table-column> -->
  59. <el-table-column prop="maxDuration" align="center" label="最高工时" width="140"></el-table-column>
  60. <el-table-column prop="orderNum" align="center" label="排序" width="200"></el-table-column>
  61. <el-table-column prop="status" label="状态" width="100">
  62. <template slot-scope="scope">
  63. <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="创建时间" align="center" prop="createTime" width="200">
  67. <template slot-scope="scope">
  68. <span>{{ parseTime(scope.row.createTime) }}</span>
  69. </template>
  70. </el-table-column>
  71. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  72. <template slot-scope="scope">
  73. <el-button
  74. size="mini"
  75. type="text"
  76. icon="el-icon-edit"
  77. @click="handleUpdate(scope.row)"
  78. v-hasPermi="['system:dept:edit']"
  79. >修改</el-button>
  80. <el-button
  81. size="mini"
  82. type="text"
  83. icon="el-icon-plus"
  84. @click="handleAdd(scope.row)"
  85. v-hasPermi="['system:dept:add']"
  86. >新增</el-button>
  87. <el-button
  88. v-if="scope.row.parentId != 0"
  89. size="mini"
  90. type="text"
  91. icon="el-icon-delete"
  92. @click="handleDelete(scope.row)"
  93. v-hasPermi="['system:dept:remove']"
  94. >删除</el-button>
  95. </template>
  96. </el-table-column>
  97. </el-table>
  98. <!-- 添加或修改部门对话框 -->
  99. <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
  100. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  101. <el-row>
  102. <el-col :span="24" v-if="form.parentId !== 0">
  103. <el-form-item label="上级部门" prop="parentId">
  104. <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
  105. </el-form-item>
  106. </el-col>
  107. </el-row>
  108. <el-row>
  109. <el-col :span="12">
  110. <el-form-item label="部门名称" prop="deptName">
  111. <el-input v-model="form.deptName" placeholder="请输入部门名称" />
  112. </el-form-item>
  113. </el-col>
  114. <el-col :span="12">
  115. <el-form-item label="显示排序" prop="orderNum">
  116. <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
  117. </el-form-item>
  118. </el-col>
  119. </el-row>
  120. <el-row>
  121. <el-col :span="12">
  122. <el-form-item label="负责人" prop="leader">
  123. <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
  124. </el-form-item>
  125. </el-col>
  126. <el-col :span="12">
  127. <el-form-item label="联系电话" prop="phone">
  128. <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
  129. </el-form-item>
  130. </el-col>
  131. </el-row>
  132. <el-row>
  133. <el-col :span="12">
  134. <el-form-item label="邮箱" prop="email">
  135. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  136. </el-form-item>
  137. </el-col>
  138. <el-col :span="12">
  139. <el-form-item label="部门状态">
  140. <el-radio-group v-model="form.status">
  141. <el-radio
  142. v-for="dict in dict.type.sys_normal_disable"
  143. :key="dict.value"
  144. :label="dict.value"
  145. >{{dict.label}}</el-radio>
  146. </el-radio-group>
  147. </el-form-item>
  148. </el-col>
  149. </el-row>
  150. <el-row>
  151. <el-col :span="12">
  152. <el-form-item label="最高打卡时长(小时)" prop="email">
  153. <el-input v-model="form.maxDuration" type="digit" placeholder="请输入时长" />
  154. </el-form-item>
  155. </el-col>
  156. </el-row>
  157. </el-form>
  158. <div slot="footer" class="dialog-footer">
  159. <el-button type="primary" @click="submitForm">确 定</el-button>
  160. <el-button @click="cancel">取 消</el-button>
  161. </div>
  162. </el-dialog>
  163. </div>
  164. </template>
  165. <script>
  166. import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
  167. import Treeselect from "@riophae/vue-treeselect";
  168. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  169. export default {
  170. name: "Dept",
  171. dicts: ['sys_normal_disable'],
  172. components: { Treeselect },
  173. data() {
  174. return {
  175. // 遮罩层
  176. loading: true,
  177. // 显示搜索条件
  178. showSearch: true,
  179. // 表格树数据
  180. deptList: [],
  181. // 部门树选项
  182. deptOptions: [],
  183. // 弹出层标题
  184. title: "",
  185. // 是否显示弹出层
  186. open: false,
  187. // 是否展开,默认全部展开
  188. isExpandAll: true,
  189. // 重新渲染表格状态
  190. refreshTable: true,
  191. // 查询参数
  192. queryParams: {
  193. deptName: undefined,
  194. status: undefined
  195. },
  196. // 表单参数
  197. form: {},
  198. // 表单校验
  199. rules: {
  200. parentId: [
  201. { required: true, message: "上级部门不能为空", trigger: "blur" }
  202. ],
  203. deptName: [
  204. { required: true, message: "部门名称不能为空", trigger: "blur" }
  205. ],
  206. orderNum: [
  207. { required: true, message: "显示排序不能为空", trigger: "blur" }
  208. ],
  209. email: [
  210. {
  211. type: "email",
  212. message: "请输入正确的邮箱地址",
  213. trigger: ["blur", "change"]
  214. }
  215. ],
  216. phone: [
  217. {
  218. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  219. message: "请输入正确的手机号码",
  220. trigger: "blur"
  221. }
  222. ]
  223. }
  224. };
  225. },
  226. created() {
  227. this.getList();
  228. },
  229. methods: {
  230. /** 查询部门列表 */
  231. getList() {
  232. this.loading = true;
  233. listDept(this.queryParams).then(response => {
  234. this.deptList = this.handleTree(response.data, "deptId");
  235. this.loading = false;
  236. });
  237. },
  238. /** 转换部门数据结构 */
  239. normalizer(node) {
  240. if (node.children && !node.children.length) {
  241. delete node.children;
  242. }
  243. return {
  244. id: node.deptId,
  245. label: node.deptName,
  246. children: node.children
  247. };
  248. },
  249. // 取消按钮
  250. cancel() {
  251. this.open = false;
  252. this.reset();
  253. },
  254. // 表单重置
  255. reset() {
  256. this.form = {
  257. deptId: undefined,
  258. parentId: undefined,
  259. deptName: undefined,
  260. orderNum: undefined,
  261. leader: undefined,
  262. phone: undefined,
  263. email: undefined,
  264. status: "0"
  265. };
  266. this.resetForm("form");
  267. },
  268. /** 搜索按钮操作 */
  269. handleQuery() {
  270. this.getList();
  271. },
  272. /** 重置按钮操作 */
  273. resetQuery() {
  274. this.resetForm("queryForm");
  275. this.handleQuery();
  276. },
  277. /** 新增按钮操作 */
  278. handleAdd(row) {
  279. this.reset();
  280. if (row != undefined) {
  281. this.form.parentId = row.deptId;
  282. }
  283. this.open = true;
  284. this.title = "添加部门";
  285. listDept().then(response => {
  286. this.deptOptions = this.handleTree(response.data, "deptId");
  287. });
  288. },
  289. /** 展开/折叠操作 */
  290. toggleExpandAll() {
  291. this.refreshTable = false;
  292. this.isExpandAll = !this.isExpandAll;
  293. this.$nextTick(() => {
  294. this.refreshTable = true;
  295. });
  296. },
  297. /** 修改按钮操作 */
  298. handleUpdate(row) {
  299. this.reset();
  300. getDept(row.deptId).then(response => {
  301. this.form = response.data;
  302. this.open = true;
  303. this.title = "修改部门";
  304. listDeptExcludeChild(row.deptId).then(response => {
  305. this.deptOptions = this.handleTree(response.data, "deptId");
  306. if (this.deptOptions.length == 0) {
  307. const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
  308. this.deptOptions.push(noResultsOptions);
  309. }
  310. });
  311. });
  312. },
  313. /** 提交按钮 */
  314. submitForm: function() {
  315. this.$refs["form"].validate(valid => {
  316. if (valid) {
  317. if (this.form.deptId != undefined) {
  318. updateDept(this.form).then(response => {
  319. this.$modal.msgSuccess("修改成功");
  320. this.open = false;
  321. this.getList();
  322. });
  323. } else {
  324. addDept(this.form).then(response => {
  325. this.$modal.msgSuccess("新增成功");
  326. this.open = false;
  327. this.getList();
  328. });
  329. }
  330. }
  331. });
  332. },
  333. /** 删除按钮操作 */
  334. handleDelete(row) {
  335. this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
  336. return delDept(row.deptId);
  337. }).then(() => {
  338. this.getList();
  339. this.$modal.msgSuccess("删除成功");
  340. }).catch(() => {});
  341. }
  342. }
  343. };
  344. </script>