index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryForm"
  6. size="small"
  7. :inline="true"
  8. v-show="showSearch"
  9. >
  10. <el-form-item label="部门名称" prop="deptName">
  11. <el-input
  12. v-model="queryParams.deptName"
  13. placeholder="请输入部门名称"
  14. clearable
  15. @keyup.enter.native="handleQuery"
  16. />
  17. </el-form-item>
  18. <el-form-item label="状态" prop="status">
  19. <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
  20. <el-option
  21. v-for="dict in dict.type.sys_normal_disable"
  22. :key="dict.value"
  23. :label="dict.label"
  24. :value="dict.value"
  25. />
  26. </el-select>
  27. </el-form-item>
  28. <el-form-item>
  29. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
  30. >搜索</el-button
  31. >
  32. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  33. </el-form-item>
  34. </el-form>
  35. <el-row :gutter="10" class="mb8">
  36. <el-col :span="1.5">
  37. <el-button
  38. type="primary"
  39. plain
  40. icon="el-icon-plus"
  41. size="mini"
  42. @click="handleAdd"
  43. v-hasPermi="['system:dept:add']"
  44. >新增</el-button
  45. >
  46. </el-col>
  47. <el-col :span="1.5">
  48. <el-button
  49. type="info"
  50. plain
  51. icon="el-icon-sort"
  52. size="mini"
  53. @click="toggleExpandAll"
  54. >展开/折叠</el-button
  55. >
  56. </el-col>
  57. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  58. </el-row>
  59. <el-table
  60. v-if="refreshTable"
  61. v-loading="loading"
  62. :data="deptList"
  63. border
  64. row-key="deptId"
  65. :default-expand-all="isExpandAll"
  66. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  67. @cell-dblclick="handleUpdate"
  68. >
  69. <el-table-column prop="deptName" label="部门名称" width="280"></el-table-column>
  70. <el-table-column
  71. prop="maxDuration"
  72. align="center"
  73. label="最高工时"
  74. width="90"
  75. ></el-table-column>
  76. <el-table-column
  77. prop="orderNum"
  78. align="center"
  79. label="排序"
  80. width="60"
  81. ></el-table-column>
  82. <el-table-column prop="status" align="center" label="状态" width="100">
  83. <template slot-scope="scope">
  84. <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
  85. </template>
  86. </el-table-column>
  87. <el-table-column label="创建时间" align="center" prop="createTime" width="200">
  88. <template slot-scope="scope">
  89. <span>{{ parseTime(scope.row.createTime) }}</span>
  90. </template>
  91. </el-table-column>
  92. <el-table-column label="logo" align="center" prop="companyLogo">
  93. <template slot-scope="scope" v-if="!!scope.row.companyLogo">
  94. <el-image
  95. style="width: 50px; height: 50px"
  96. :src="realSrc(scope.row.companyLogo)"
  97. :preview-src-list="[realSrc(scope.row.companyLogo)]"
  98. >
  99. </el-image>
  100. </template>
  101. </el-table-column>
  102. <el-table-column
  103. prop="companyFullName"
  104. align="center"
  105. label="简称"
  106. ></el-table-column>
  107. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  108. <template slot-scope="scope">
  109. <el-button
  110. size="mini"
  111. type="text"
  112. icon="el-icon-edit"
  113. @click="handleUpdate(scope.row)"
  114. v-hasPermi="['system:dept:edit']"
  115. >修改</el-button
  116. >
  117. <el-button
  118. size="mini"
  119. type="text"
  120. icon="el-icon-plus"
  121. @click="handleAdd(scope.row)"
  122. v-hasPermi="['system:dept:add']"
  123. >新增</el-button
  124. >
  125. <el-button
  126. v-if="scope.row.parentId != 0"
  127. size="mini"
  128. type="text"
  129. icon="el-icon-delete"
  130. @click="handleDelete(scope.row)"
  131. v-hasPermi="['system:dept:remove']"
  132. >删除</el-button
  133. >
  134. </template>
  135. </el-table-column>
  136. </el-table>
  137. <!-- 添加或修改部门对话框 -->
  138. <el-dialog
  139. :title="title"
  140. :visible.sync="open"
  141. width="700px"
  142. append-to-body
  143. :close-on-click-modal="false"
  144. >
  145. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  146. <el-row>
  147. <el-col :span="24" v-if="form.parentId !== 0">
  148. <el-form-item label="上级部门" prop="parentId">
  149. <treeselect
  150. v-model="form.parentId"
  151. :options="deptOptions"
  152. :normalizer="normalizer"
  153. placeholder="选择上级部门"
  154. @select="treeSelectChange"
  155. />
  156. </el-form-item>
  157. </el-col>
  158. </el-row>
  159. <el-row>
  160. <el-col :span="12">
  161. <el-form-item label="部门名称" prop="deptName">
  162. <el-input v-model="form.deptName" placeholder="请输入部门名称" />
  163. </el-form-item>
  164. </el-col>
  165. <el-col :span="12">
  166. <el-form-item label="显示排序" prop="orderNum">
  167. <el-input-number
  168. v-model="form.orderNum"
  169. controls-position="right"
  170. placeholder="数字越小,排序越前"
  171. :min="0"
  172. />
  173. </el-form-item>
  174. </el-col>
  175. </el-row>
  176. <el-row v-if="isERP">
  177. <el-col :span="12">
  178. <el-form-item label="企业logo" prop="companyLogo">
  179. <ImageUpload v-model="form.companyLogo" :limit="1" />
  180. </el-form-item>
  181. </el-col>
  182. <el-col :span="12">
  183. <el-form-item label="企业简称" prop="companyFullName">
  184. <el-input
  185. v-model="form.companyFullName"
  186. placeholder="限制8个字符以内,如科德研发工时系统"
  187. />
  188. </el-form-item>
  189. </el-col>
  190. </el-row>
  191. <el-row>
  192. <el-col :span="12">
  193. <el-form-item label="负责人" prop="leader">
  194. <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
  195. </el-form-item>
  196. </el-col>
  197. <el-col :span="12">
  198. <el-form-item label="联系电话" prop="phone">
  199. <el-input
  200. v-model="form.phone"
  201. placeholder="请输入联系电话"
  202. maxlength="11"
  203. />
  204. </el-form-item>
  205. </el-col>
  206. </el-row>
  207. <el-row>
  208. <el-col :span="12">
  209. <el-form-item label="邮箱" prop="email">
  210. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  211. </el-form-item>
  212. </el-col>
  213. <el-col :span="12">
  214. <el-form-item label="部门状态">
  215. <el-radio-group v-model="form.status">
  216. <el-radio
  217. v-for="dict in dict.type.sys_normal_disable"
  218. :key="dict.value"
  219. :label="dict.value"
  220. >{{ dict.label }}</el-radio
  221. >
  222. </el-radio-group>
  223. </el-form-item>
  224. </el-col>
  225. </el-row>
  226. <el-row>
  227. <el-col :span="12">
  228. <el-form-item label="最高打卡时长(小时)" prop="email">
  229. <el-input
  230. v-model="form.maxDuration"
  231. type="digit"
  232. placeholder="请输入时长"
  233. />
  234. </el-form-item>
  235. </el-col>
  236. <el-col :span="12">
  237. <div style="color: red; line-height: 36px; margin-left: 10px">
  238. 注:默认最高工时为8
  239. </div>
  240. </el-col>
  241. </el-row>
  242. </el-form>
  243. <div slot="footer" class="dialog-footer">
  244. <el-button type="primary" @click="submitForm">确 定</el-button>
  245. <el-button @click="cancel">取 消</el-button>
  246. </div>
  247. </el-dialog>
  248. </div>
  249. </template>
  250. <script>
  251. import {
  252. listDept,
  253. getDept,
  254. delDept,
  255. addDept,
  256. updateDept,
  257. listDeptExcludeChild,
  258. } from "@/api/system/dept";
  259. import Treeselect from "@riophae/vue-treeselect";
  260. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  261. export default {
  262. name: "Dept",
  263. dicts: ["sys_normal_disable"],
  264. components: { Treeselect },
  265. data() {
  266. return {
  267. isERP: false,
  268. // 遮罩层
  269. loading: true,
  270. // 显示搜索条件
  271. showSearch: true,
  272. // 表格树数据
  273. deptList: [],
  274. // 部门树选项
  275. deptOptions: [],
  276. // 弹出层标题
  277. title: "",
  278. // 是否显示弹出层
  279. open: false,
  280. // 是否展开,默认全部展开
  281. isExpandAll: true,
  282. // 重新渲染表格状态
  283. refreshTable: true,
  284. // 查询参数
  285. queryParams: {
  286. deptName: undefined,
  287. status: undefined,
  288. },
  289. // 表单参数
  290. form: {},
  291. // 表单校验
  292. rules: {
  293. parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
  294. deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
  295. orderNum: [{ required: true, message: "数字越小,排序越前", trigger: "blur" }],
  296. companyLogo: [{ required: true, message: "请上传企业logo", trigger: "blur" }],
  297. companyFullName: [
  298. {
  299. required: true,
  300. message: "限制8个字符以内,如科德研发工时系统",
  301. trigger: "blur",
  302. },
  303. ],
  304. email: [
  305. {
  306. type: "email",
  307. message: "请输入正确的邮箱地址",
  308. trigger: ["blur", "change"],
  309. },
  310. ],
  311. phone: [
  312. {
  313. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  314. message: "请输入正确的手机号码",
  315. trigger: "blur",
  316. },
  317. ],
  318. },
  319. };
  320. },
  321. created() {
  322. this.getList();
  323. },
  324. methods: {
  325. /** 查询部门列表 */
  326. getList() {
  327. this.loading = true;
  328. listDept(this.queryParams).then((response) => {
  329. this.deptList = this.handleTree(response.data, "deptId");
  330. this.loading = false;
  331. });
  332. },
  333. /** 转换部门数据结构 */
  334. normalizer(node) {
  335. if (node.children && !node.children.length) {
  336. delete node.children;
  337. }
  338. return {
  339. id: node.deptId,
  340. label: node.deptName,
  341. children: node.children,
  342. };
  343. },
  344. // 取消按钮
  345. cancel() {
  346. this.open = false;
  347. this.reset();
  348. },
  349. // 表单重置
  350. reset() {
  351. this.form = {
  352. deptId: undefined,
  353. parentId: undefined,
  354. deptName: undefined,
  355. orderNum: undefined,
  356. leader: undefined,
  357. phone: undefined,
  358. email: undefined,
  359. status: "0",
  360. maxDuration: 8,
  361. };
  362. this.resetForm("form");
  363. },
  364. /** 搜索按钮操作 */
  365. handleQuery() {
  366. this.getList();
  367. },
  368. /** 重置按钮操作 */
  369. resetQuery() {
  370. this.resetForm("queryForm");
  371. this.handleQuery();
  372. },
  373. /** 新增按钮操作 */
  374. handleAdd(row) {
  375. this.reset();
  376. if (row != undefined) {
  377. this.form.parentId = row.deptId;
  378. }
  379. this.open = true;
  380. this.title = "添加部门";
  381. listDept().then((response) => {
  382. this.deptOptions = this.handleTree(response.data, "deptId");
  383. this.form.parentId = response.data[0].deptId;
  384. this.form.orderNum = 1;
  385. // deptId == 100为创建公司
  386. this.isERP = response.data[0].deptId == 100;
  387. });
  388. },
  389. /** 展开/折叠操作 */
  390. toggleExpandAll() {
  391. this.refreshTable = false;
  392. this.isExpandAll = !this.isExpandAll;
  393. this.$nextTick(() => {
  394. this.refreshTable = true;
  395. });
  396. },
  397. /** 修改按钮操作 */
  398. handleUpdate(row) {
  399. this.reset();
  400. getDept(row.deptId).then((response) => {
  401. this.form = response.data;
  402. this.isERP = response.data.parentId == 100;
  403. this.open = true;
  404. this.title = "修改部门";
  405. listDeptExcludeChild(row.deptId).then((response) => {
  406. this.deptOptions = this.handleTree(response.data, "deptId");
  407. if (this.deptOptions.length == 0) {
  408. const noResultsOptions = {
  409. deptId: this.form.parentId,
  410. deptName: this.form.parentName,
  411. children: [],
  412. };
  413. this.deptOptions.push(noResultsOptions);
  414. }
  415. });
  416. });
  417. },
  418. /** 提交按钮 */
  419. submitForm: function () {
  420. this.$refs["form"].validate((valid) => {
  421. if (!this.isERP) {
  422. delete this.form["companyLogo"];
  423. delete this.form["companyFullName"];
  424. }
  425. if (valid) {
  426. if (this.form.deptId != undefined) {
  427. updateDept(this.form).then((response) => {
  428. this.$modal.msgSuccess("修改成功");
  429. this.open = false;
  430. this.getList();
  431. });
  432. } else {
  433. addDept(this.form).then((response) => {
  434. this.$modal.msgSuccess("新增成功");
  435. this.open = false;
  436. this.getList();
  437. });
  438. }
  439. }
  440. });
  441. },
  442. /** 删除按钮操作 */
  443. handleDelete(row) {
  444. this.$modal
  445. .confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
  446. .then(function () {
  447. return delDept(row.deptId);
  448. })
  449. .then(() => {
  450. this.getList();
  451. this.$modal.msgSuccess("删除成功");
  452. })
  453. .catch(() => {});
  454. },
  455. /**图片显示处理 */
  456. realSrc(src) {
  457. if (!src) {
  458. return;
  459. }
  460. return process.env.VUE_APP_BASE_API + src;
  461. },
  462. treeSelectChange(value) {
  463. this.isERP = value.deptId == 100;
  464. },
  465. },
  466. };
  467. </script>