index.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="20">
  4. <!--部门数据-->
  5. <el-col
  6. :span="2"
  7. :xs="24"
  8. style="padding-left: 0; padding-right: 0; overflow-x: auto"
  9. >
  10. <div class="head-container">
  11. <el-input
  12. v-model="deptName"
  13. placeholder="请输入部门名称"
  14. clearable
  15. size="small"
  16. prefix-icon="el-icon-search"
  17. style="margin-bottom: 20px"
  18. />
  19. </div>
  20. <div class="head-container" style="display: flex">
  21. <el-tree
  22. :data="deptOptions"
  23. :props="defaultProps"
  24. :expand-on-click-node="false"
  25. :filter-node-method="filterNode"
  26. ref="tree"
  27. node-key="id"
  28. default-expand-all
  29. highlight-current
  30. @node-click="handleNodeClick"
  31. />
  32. </div>
  33. </el-col>
  34. <!--用户数据-->
  35. <el-col :span="22" :xs="24">
  36. <el-form
  37. :model="queryParams"
  38. ref="queryForm"
  39. size="small"
  40. :inline="true"
  41. v-show="showSearch"
  42. label-width="68px"
  43. >
  44. <el-form-item label="项目编号" prop="projectNumber">
  45. <el-input
  46. v-model="queryParams.projectNumber"
  47. placeholder="请输入项目编号"
  48. clearable
  49. style="width: 240px"
  50. @keyup.enter.native="handleQuery"
  51. />
  52. </el-form-item>
  53. <el-form-item label="项目名称" prop="name">
  54. <el-input
  55. v-model="queryParams.name"
  56. placeholder="请输入项目名称"
  57. clearable
  58. style="width: 240px"
  59. @keyup.enter.native="handleQuery"
  60. />
  61. </el-form-item>
  62. <el-form-item label="研发人员" prop="staffId">
  63. <el-autocomplete
  64. v-model="superiorName"
  65. value-key="nickName"
  66. :fetch-suggestions="getDatas"
  67. :filter-multiple="true"
  68. clearable
  69. placeholder="请输入关键字"
  70. @select="selectUser"
  71. />
  72. </el-form-item>
  73. <el-form-item label="项目年份" prop="projectYear">
  74. <el-date-picker
  75. v-model="queryParams.projectYear"
  76. value-format="yyyy"
  77. type="year"
  78. placeholder="选择项目年份"
  79. >
  80. </el-date-picker>
  81. </el-form-item>
  82. <el-form-item label="是否跨年" prop="crossYear">
  83. <el-select
  84. v-model="queryParams.crossYear"
  85. placeholder="是否跨年"
  86. clearable
  87. style="width: 240px"
  88. >
  89. <el-option
  90. v-for="dict in year"
  91. :key="dict.value"
  92. :label="dict.label"
  93. :value="dict.value"
  94. />
  95. </el-select>
  96. </el-form-item>
  97. <el-form-item label="起止时间">
  98. <el-date-picker
  99. v-model="dateRange"
  100. style="width: 240px"
  101. value-format="yyyy-MM-dd"
  102. type="daterange"
  103. range-separator="-"
  104. start-placeholder="开始日期"
  105. end-placeholder="结束日期"
  106. ></el-date-picker>
  107. </el-form-item>
  108. <el-form-item>
  109. <el-button
  110. type="primary"
  111. icon="el-icon-search"
  112. size="mini"
  113. @click="handleQuery"
  114. >搜索</el-button
  115. >
  116. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
  117. >重置</el-button
  118. >
  119. </el-form-item>
  120. </el-form>
  121. <el-row :gutter="10" class="mb8">
  122. <el-col :span="1.5">
  123. <el-button
  124. type="primary"
  125. plain
  126. icon="el-icon-plus"
  127. size="mini"
  128. @click="handleAdd"
  129. v-hasPermi="['system:user:add']"
  130. >新增</el-button
  131. >
  132. </el-col>
  133. <el-col :span="1.5">
  134. <el-button
  135. type="info"
  136. plain
  137. icon="el-icon-upload2"
  138. size="mini"
  139. @click="handleImport"
  140. v-hasPermi="['system:user:import']"
  141. >导入</el-button
  142. >
  143. </el-col>
  144. <el-col :span="1.5">
  145. <el-button
  146. type="warning"
  147. plain
  148. icon="el-icon-download"
  149. size="mini"
  150. @click="handleExport"
  151. v-hasPermi="['system:user:export']"
  152. >导出</el-button
  153. >
  154. </el-col>
  155. <right-toolbar
  156. :showSearch.sync="showSearch"
  157. @queryTable="getList"
  158. :columns="columns"
  159. ></right-toolbar>
  160. </el-row>
  161. <el-table
  162. v-loading="loading"
  163. :data="userList"
  164. @selection-change="handleSelectionChange"
  165. >
  166. <el-table-column type="selection" width="50" align="center" />
  167. <el-table-column
  168. label="项目编号"
  169. align="center"
  170. key="projectNumber"
  171. prop="projectNumber"
  172. v-if="columns[0].visible"
  173. />
  174. <el-table-column
  175. label="项目年份"
  176. align="center"
  177. width="80"
  178. key="projectYear"
  179. prop="projectYear"
  180. v-if="columns[1].visible"
  181. />
  182. <el-table-column
  183. label="是否跨年"
  184. align="center"
  185. width="80"
  186. key="crossYear"
  187. prop="crossYear"
  188. v-if="columns[2].visible"
  189. >
  190. <template slot-scope="scope">
  191. <span>{{ ["非跨年", "跨年"][scope.row.crossYear] }}</span>
  192. </template>
  193. </el-table-column>
  194. <el-table-column
  195. label="项目名称"
  196. align="center"
  197. key="name"
  198. prop="name"
  199. v-if="columns[3].visible"
  200. :show-overflow-tooltip="true"
  201. />
  202. <el-table-column
  203. label="负责人"
  204. align="center"
  205. key="adminName"
  206. prop="adminName"
  207. v-if="columns[4].visible"
  208. />
  209. <el-table-column
  210. label="参与研发人员"
  211. align="center"
  212. key="staffName"
  213. prop="staffName"
  214. v-if="columns[5].visible"
  215. />
  216. <el-table-column
  217. label="项目状态"
  218. align="center"
  219. width="80"
  220. key="projectStatus"
  221. prop="projectStatus"
  222. v-if="columns[6].visible"
  223. >
  224. <template slot-scope="scope">
  225. <dict-tag
  226. :options="dict.type.sys_project_status"
  227. :value="scope.row.projectStatus"
  228. />
  229. </template>
  230. </el-table-column>
  231. <el-table-column
  232. label="累积工时"
  233. align="center"
  234. width="50"
  235. key="duration"
  236. prop="duration"
  237. v-if="columns[7].visible"
  238. ></el-table-column>
  239. <el-table-column
  240. label="创建年份"
  241. align="center"
  242. width="80"
  243. key="createYear"
  244. prop="createYear"
  245. v-if="columns[8].visible"
  246. />
  247. <el-table-column
  248. label="起止时间"
  249. align="center"
  250. width="168"
  251. key="startTime"
  252. prop="startTime"
  253. v-if="columns[9].visible"
  254. >
  255. <template slot-scope="scope">
  256. <div style="font-size: 12px;">
  257. {{ scope.row.startTime + " 至 " + scope.row.endTime }}
  258. </div>
  259. </template>
  260. </el-table-column>
  261. <el-table-column
  262. label="操作"
  263. align="center"
  264. width="80"
  265. class-name="small-padding fixed-width"
  266. >
  267. <template slot-scope="scope" v-if="scope.row.userId !== 1">
  268. <el-button
  269. size="mini"
  270. type="text"
  271. icon="el-icon-edit"
  272. @click="handleUpdate(scope.row)"
  273. v-hasPermi="['system:user:edit']"
  274. >修改</el-button
  275. >
  276. </template>
  277. </el-table-column>
  278. </el-table>
  279. <pagination
  280. v-show="total > 0"
  281. :total="total"
  282. :page.sync="queryParams.pageNum"
  283. :limit.sync="queryParams.pageSize"
  284. @pagination="getList"
  285. />
  286. </el-col>
  287. </el-row>
  288. <!-- 添加或修改项目配置对话框 -->
  289. <el-dialog
  290. :title="title"
  291. :visible.sync="open"
  292. width="700px"
  293. append-to-body
  294. :close-on-click-modal="false"
  295. >
  296. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  297. <el-row>
  298. <el-col :span="12">
  299. <el-form-item label="项目编号" prop="projectNumber">
  300. <el-input
  301. v-model="form.projectNumber"
  302. placeholder="请输入项目编号"
  303. maxlength="30"
  304. />
  305. </el-form-item>
  306. </el-col>
  307. <el-col :span="12">
  308. <el-form-item label="项目名称" prop="name">
  309. <el-input v-model="form.name" placeholder="请输入项目名称" maxlength="30" />
  310. </el-form-item>
  311. </el-col>
  312. </el-row>
  313. <el-row>
  314. <el-col :span="12">
  315. <el-form-item label="起止时间">
  316. <el-date-picker
  317. v-model="dateRange1"
  318. style="width: 250px"
  319. value-format="yyyy-MM-dd"
  320. type="daterange"
  321. range-separator="-"
  322. start-placeholder="开始日期"
  323. end-placeholder="结束日期"
  324. ></el-date-picker>
  325. </el-form-item>
  326. </el-col>
  327. <el-col :span="12">
  328. <el-form-item label="是否跨年" prop="crossYear">
  329. <el-select
  330. v-model="form.crossYear"
  331. style="width: 250px"
  332. placeholder="请选择是否跨年"
  333. >
  334. <el-option
  335. v-for="dict in year"
  336. :key="dict.value"
  337. :label="dict.label"
  338. :value="dict.value"
  339. ></el-option>
  340. </el-select>
  341. </el-form-item>
  342. </el-col>
  343. </el-row>
  344. <el-row>
  345. <el-col :span="12">
  346. <el-form-item label="创建年份" prop="createYear">
  347. <el-date-picker
  348. v-model="form.createYear"
  349. style="width: 250px"
  350. value-format="yyyy"
  351. type="year"
  352. placeholder="选择创建年份"
  353. >
  354. </el-date-picker>
  355. </el-form-item>
  356. </el-col>
  357. <el-col :span="12">
  358. <el-form-item label="项目年份" prop="projectYear">
  359. <el-date-picker
  360. v-model="form.projectYear"
  361. style="width: 250px"
  362. value-format="yyyy"
  363. type="year"
  364. placeholder="选择项目年份"
  365. >
  366. </el-date-picker>
  367. </el-form-item>
  368. </el-col>
  369. </el-row>
  370. <el-row>
  371. <el-col :span="12">
  372. <el-form-item label="负责人" prop="aid">
  373. <el-autocomplete
  374. v-model="superiorName1"
  375. style="width: 250px"
  376. value-key="nickName"
  377. :fetch-suggestions="getDatas1"
  378. :filter-multiple="true"
  379. clearable
  380. placeholder="请输入关键字"
  381. @select="selectUser1"
  382. />
  383. </el-form-item>
  384. </el-col>
  385. </el-row>
  386. <el-row>
  387. <el-col :span="12">
  388. <el-form-item label="项目成员">
  389. <el-autocomplete
  390. v-model="superiorName2"
  391. style="width: 250px"
  392. value-key="nickName"
  393. :fetch-suggestions="getDatas2"
  394. :filter-multiple="true"
  395. clearable
  396. placeholder="输入查询"
  397. @select="selectUser2"
  398. />
  399. </el-form-item>
  400. </el-col>
  401. <el-col :span="12">
  402. <el-button type="primary" style="margin-left: 15px" @click="addStaff"
  403. >添加成员</el-button
  404. >
  405. </el-col>
  406. </el-row>
  407. <el-row>
  408. <el-col :span="24">
  409. <el-form-item>
  410. <el-tag
  411. v-for="tag in tags"
  412. :key="tag.name"
  413. style="margin-right: 10px"
  414. closable
  415. @close="deleteStaff(tag.id)"
  416. >
  417. {{ tag.name }}
  418. </el-tag>
  419. </el-form-item>
  420. </el-col>
  421. </el-row>
  422. <el-row>
  423. <el-col :span="24">
  424. <el-form-item label="备注">
  425. <el-input
  426. v-model="form.remark"
  427. type="textarea"
  428. placeholder="请输入内容"
  429. ></el-input>
  430. </el-form-item>
  431. </el-col>
  432. </el-row>
  433. </el-form>
  434. <div slot="footer" class="dialog-footer">
  435. <el-button type="primary" @click="submitForm">确 定</el-button>
  436. <el-button @click="cancel">取 消</el-button>
  437. </div>
  438. </el-dialog>
  439. <!-- 项目导入对话框 -->
  440. <el-dialog
  441. :title="upload.title"
  442. :visible.sync="upload.open"
  443. width="400px"
  444. append-to-body
  445. >
  446. <el-upload
  447. ref="upload"
  448. :limit="1"
  449. accept=".xlsx, .xls"
  450. :headers="upload.headers"
  451. :action="upload.url + '?updateSupport=' + upload.updateSupport"
  452. :disabled="upload.isUploading"
  453. :on-progress="handleFileUploadProgress"
  454. :on-success="handleFileSuccess"
  455. :auto-upload="false"
  456. drag
  457. >
  458. <i class="el-icon-upload"></i>
  459. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  460. <div class="el-upload__tip text-center" slot="tip">
  461. <div class="el-upload__tip" slot="tip">
  462. <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
  463. </div>
  464. <span>仅允许导入xls、xlsx格式文件。</span>
  465. <el-link
  466. type="primary"
  467. :underline="false"
  468. style="font-size: 12px; vertical-align: baseline"
  469. @click="importTemplate"
  470. >下载模板</el-link
  471. >
  472. </div>
  473. </el-upload>
  474. <div slot="footer" class="dialog-footer">
  475. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  476. <el-button @click="upload.open = false">取 消</el-button>
  477. </div>
  478. </el-dialog>
  479. </div>
  480. </template>
  481. <script>
  482. import {
  483. listProject,
  484. addProject,
  485. updateProject,
  486. addStaff,
  487. listStaff,
  488. deleteStaff,
  489. } from "@/api/system/project";
  490. import { selectName, deptTreeSelect } from "@/api/system/user";
  491. import { getToken } from "@/utils/auth";
  492. import Treeselect from "@riophae/vue-treeselect";
  493. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  494. export default {
  495. name: "User",
  496. dicts: ["sys_normal_disable", "sys_user_sex", "sys_project_status"],
  497. components: { Treeselect },
  498. data() {
  499. return {
  500. superiorName: "",
  501. superiorName1: "",
  502. superiorId2: "",
  503. superiorName2: "",
  504. tags: [],
  505. tagIds: [],
  506. // 遮罩层
  507. loading: true,
  508. // 选中数组
  509. ids: [],
  510. // 非单个禁用
  511. single: true,
  512. // 非多个禁用
  513. multiple: true,
  514. // 显示搜索条件
  515. showSearch: true,
  516. // 总条数
  517. total: 0,
  518. // 用户表格数据
  519. userList: null,
  520. // 弹出层标题
  521. title: "",
  522. // 部门树选项
  523. deptOptions: undefined,
  524. // 是否显示弹出层
  525. open: false,
  526. // 部门名称
  527. deptName: undefined,
  528. // 默认密码
  529. initPassword: undefined,
  530. // 日期范围
  531. dateRange: [],
  532. dateRange1: [],
  533. // 岗位选项
  534. postOptions: [],
  535. // 角色选项
  536. roleOptions: [],
  537. // 表单参数
  538. form: {},
  539. year: [
  540. { label: "非跨年", value: 0 },
  541. { label: "跨年", value: 1 },
  542. ],
  543. defaultProps: {
  544. children: "children",
  545. label: "label",
  546. },
  547. // 用户导入参数
  548. upload: {
  549. // 是否显示弹出层(用户导入)
  550. open: false,
  551. // 弹出层标题(用户导入)
  552. title: "",
  553. // 是否禁用上传
  554. isUploading: false,
  555. // 是否更新已经存在的用户数据
  556. updateSupport: 0,
  557. // 设置上传的请求头部
  558. headers: { Authorization: "Bearer " + getToken() },
  559. // 上传的地址
  560. url: process.env.VUE_APP_BASE_API + "/api/project/importData",
  561. },
  562. // 查询参数
  563. queryParams: {
  564. pageNum: 1,
  565. pageSize: 10,
  566. projectNumber: undefined,
  567. name: undefined,
  568. staffId: undefined,
  569. projectYear: undefined,
  570. crossYear: undefined,
  571. },
  572. // 列信息
  573. columns: [
  574. { key: 0, label: `项目编号`, visible: true },
  575. { key: 1, label: `项目年份`, visible: true },
  576. { key: 2, label: `是否跨年`, visible: true },
  577. { key: 3, label: `项目名称`, visible: true },
  578. { key: 4, label: `负责人`, visible: true },
  579. { key: 5, label: `参与研发人员`, visible: true },
  580. { key: 6, label: `项目状态`, visible: true },
  581. { key: 7, label: `累积工时`, visible: true },
  582. { key: 8, label: `创建年份`, visible: true },
  583. { key: 9, label: `起止时间`, visible: true },
  584. ],
  585. // 表单校验
  586. rules: {
  587. projectNumber: [{ required: true, message: "项目编号不能为空", trigger: "blur" }],
  588. name: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
  589. aid: [{ required: true, message: "负责人不能为空", trigger: ["blur", "change"] }],
  590. crossYear: [{ required: true, message: "请选择是否跨年", trigger: "blur" }],
  591. createYear: [{ required: true, message: "创建年份不能为空", trigger: "blur" }],
  592. projectYear: [{ required: true, message: "项目年份不能为空", trigger: "blur" }],
  593. },
  594. };
  595. },
  596. watch: {
  597. // 根据名称筛选部门树
  598. deptName(val) {
  599. this.$refs.tree.filter(val);
  600. },
  601. },
  602. created() {
  603. this.getList();
  604. this.getDeptTree();
  605. this.getConfigKey("sys.user.initPassword").then((response) => {
  606. this.initPassword = response.msg;
  607. });
  608. },
  609. methods: {
  610. // 根据查询关键词,获取匹配的下拉列表数据
  611. getDatas(query, cb) {
  612. selectName(query, 0).then((response) => {
  613. cb(response.data);
  614. });
  615. },
  616. getDatas1(query, cb) {
  617. selectName(query, 2).then((response) => {
  618. cb(response.data);
  619. });
  620. },
  621. getDatas2(query, cb) {
  622. selectName(query, 2).then((response) => {
  623. cb(response.data);
  624. });
  625. },
  626. selectUser(item) {
  627. this.queryParams.staffId = item.userId;
  628. this.superiorName = item.nickName;
  629. },
  630. selectUser1(item) {
  631. this.form.aid = item.userId;
  632. this.form.adminName = item.nickName;
  633. },
  634. selectUser2(item) {
  635. this.superiorId2 = item.userId;
  636. this.superiorName2 = item.nickName;
  637. },
  638. /** 查询用户列表 */
  639. getList() {
  640. this.loading = true;
  641. if (this.dateRange.length > 0) {
  642. this.queryParams.startTime = this.dateRange[0];
  643. this.queryParams.endTime = this.dateRange[1];
  644. }
  645. listProject(this.queryParams).then((response) => {
  646. this.userList = response.rows;
  647. this.total = response.total;
  648. this.loading = false;
  649. });
  650. },
  651. /** 查询部门下拉树结构 */
  652. getDeptTree() {
  653. deptTreeSelect().then((response) => {
  654. this.deptOptions = response.data;
  655. });
  656. },
  657. // 筛选节点
  658. filterNode(value, data) {
  659. if (!value) return true;
  660. return data.label.indexOf(value) !== -1;
  661. },
  662. // 节点单击事件
  663. handleNodeClick(data) {
  664. this.queryParams.deptId = data.id;
  665. this.handleQuery();
  666. },
  667. // 取消按钮
  668. cancel() {
  669. this.open = false;
  670. this.reset();
  671. },
  672. // 表单重置
  673. reset() {
  674. this.form = {
  675. aid: undefined,
  676. adminName: undefined,
  677. name: undefined,
  678. projectStatus: 1,
  679. projectNumber: undefined,
  680. projectYear: undefined,
  681. createYear: undefined,
  682. crossYear: undefined,
  683. remark: undefined,
  684. startTime: undefined,
  685. endTime: undefined,
  686. };
  687. this.superiorName1 = undefined;
  688. this.superiorName2 = undefined;
  689. this.dateRange1 = [];
  690. this.tags = [];
  691. this.resetForm("form");
  692. },
  693. /** 搜索按钮操作 */
  694. handleQuery() {
  695. this.queryParams.pageNum = 1;
  696. this.getList();
  697. },
  698. /** 重置按钮操作 */
  699. resetQuery() {
  700. this.dateRange = [];
  701. this.resetForm("queryForm");
  702. this.queryParams.startTime = undefined;
  703. this.queryParams.endTime = undefined;
  704. this.queryParams.deptId = undefined;
  705. this.superiorName = undefined;
  706. // this.$refs.tree.setCurrentKey(null);
  707. this.handleQuery();
  708. },
  709. // 多选框选中数据
  710. handleSelectionChange(selection) {
  711. this.ids = selection.map((item) => item.userId);
  712. this.single = selection.length != 1;
  713. this.multiple = !selection.length;
  714. },
  715. /** 新增按钮操作 */
  716. handleAdd() {
  717. this.reset();
  718. this.open = true;
  719. this.title = "新增项目";
  720. },
  721. /** 修改按钮操作 */
  722. handleUpdate(row) {
  723. this.reset();
  724. this.listStaff(row.id);
  725. this.open = true;
  726. this.title = "修改项目";
  727. this.form = {
  728. id: row.id,
  729. aid: row.aid,
  730. adminName: row.adminName,
  731. name: row.name,
  732. projectStatus: row.projectStatus,
  733. projectNumber: row.projectNumber,
  734. projectYear: row.projectYear,
  735. createYear: row.createYear,
  736. crossYear: row.crossYear,
  737. remark: row.remark,
  738. };
  739. this.dateRange1 = [row.startTime || "", row.endTime || ""];
  740. this.superiorName1 = row.adminName;
  741. },
  742. /** 导出按钮操作 */
  743. handleExport() {
  744. this.download(
  745. "api/project/export",
  746. {
  747. ...this.queryParams,
  748. },
  749. `project_${new Date().getTime()}.xlsx`
  750. );
  751. },
  752. /** 导入按钮操作 */
  753. handleImport() {
  754. this.upload.title = "项目导入";
  755. this.upload.open = true;
  756. },
  757. /** 下载模板操作 */
  758. importTemplate() {
  759. this.download(
  760. "api/project/importTemplate",
  761. {},
  762. `project_template_${new Date().getTime()}.xlsx`
  763. );
  764. },
  765. // 文件上传中处理
  766. handleFileUploadProgress(event, file, fileList) {
  767. this.upload.isUploading = true;
  768. },
  769. // 文件上传成功处理
  770. handleFileSuccess(response, file, fileList) {
  771. this.upload.open = false;
  772. this.upload.isUploading = false;
  773. this.$refs.upload.clearFiles();
  774. this.$alert(
  775. "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
  776. response.msg +
  777. "</div>",
  778. "导入结果",
  779. { dangerouslyUseHTMLString: true }
  780. );
  781. this.getList();
  782. },
  783. // 提交上传文件
  784. submitFileForm() {
  785. this.$refs.upload.submit();
  786. },
  787. /** 提交按钮 */
  788. submitForm: function () {
  789. this.$refs["form"].validate((valid) => {
  790. this.form.startTime = this.dateRange1[0];
  791. this.form.endTime = this.dateRange1[1];
  792. if (valid) {
  793. if (this.form.id != undefined) {
  794. updateProject(this.form).then((response) => {
  795. this.$modal.msgSuccess("修改成功");
  796. this.open = false;
  797. this.getList();
  798. });
  799. } else {
  800. if (this.tags.length > 0) {
  801. let result = this.tags.map((obj) => obj.id);
  802. this.form.staffObject = result.toString();
  803. }
  804. addProject(this.form).then((response) => {
  805. this.$modal.msgSuccess("新增成功");
  806. this.open = false;
  807. this.getList();
  808. });
  809. }
  810. }
  811. });
  812. },
  813. /** 项目成员列表 */
  814. listStaff(id) {
  815. let data = {
  816. pid: id,
  817. };
  818. listStaff(data).then((response) => {
  819. this.tags = response.data;
  820. });
  821. },
  822. /** 添加项目成员 */
  823. addStaff() {
  824. let data = {
  825. pid: this.form.id,
  826. aid: this.superiorId2,
  827. name: this.superiorName2,
  828. };
  829. if (!this.form.id) {
  830. let result = this.tags.filter((obj) => obj.aid === this.superiorId2);
  831. if (result.length != 0) {
  832. this.$modal.msgWarning("已经添加过该成员了~");
  833. return;
  834. }
  835. }
  836. addStaff(data).then((response) => {
  837. if (response.code == 200) {
  838. this.$modal.msgSuccess("添加成功");
  839. if (this.form.id != undefined) {
  840. this.listStaff(this.form.id);
  841. } else {
  842. let list = this.tags;
  843. list.push({
  844. aid: response.data.aid,
  845. name: response.data.name,
  846. id: response.data.id,
  847. });
  848. this.tags = list;
  849. }
  850. this.superiorId2 = undefined;
  851. this.superiorName2 = undefined;
  852. }
  853. });
  854. },
  855. /** 删除项目成员 */
  856. deleteStaff(id) {
  857. if (!this.form.id) {
  858. let list = this.tags;
  859. list.splice(list.indexOf(list.find((item) => item.id === id)), 1);
  860. this.tags = list;
  861. } else {
  862. let data = {
  863. id,
  864. };
  865. deleteStaff(data).then((response) => {
  866. if (response.code == 200) {
  867. this.listStaff(this.form.id);
  868. this.$modal.msgSuccess("移除项目成员成功~");
  869. }
  870. });
  871. }
  872. },
  873. },
  874. };
  875. </script>