DemandView.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. <template>
  2. <div class="containe">
  3. <!-- <div class="header">
  4. <span>文档管理</span>
  5. <img src="../../../assets/img/chevron-down.png" alt="" />
  6. <img src="../../../assets/img/slash.png" alt="" />
  7. <span class="top1">扩容申请</span>
  8. <img src="../../../assets/img/chevron-up.png" alt="" class="top2" />
  9. <img src="../../../assets/img/slash.png" alt="" />
  10. </div>
  11. <div class="title">扩容申请</div> -->
  12. <div class="main">
  13. <h3>扩容申请</h3>
  14. <div class="main-main">
  15. <el-form
  16. :model="queryParams"
  17. ref="queryForm"
  18. size="small"
  19. :inline="true"
  20. v-show="showSearch"
  21. label-width="68px"
  22. >
  23. <el-form-item label="空间名称" prop="spaceName">
  24. <el-input
  25. v-model="queryParams.spaceName"
  26. placeholder="请输入空间名称"
  27. clearable
  28. @keyup.enter.native="handleQuery"
  29. />
  30. </el-form-item>
  31. <el-form-item label="扩容状态" prop="expandStatus">
  32. <el-select
  33. v-model="queryParams.expandStatus"
  34. placeholder="请选择扩容状态"
  35. clearable
  36. :popper-append-to-body="false"
  37. >
  38. <el-option
  39. v-for="dict in dict.type.expand_status"
  40. :key="dict.value"
  41. :label="dict.label"
  42. :value="dict.value"
  43. />
  44. </el-select>
  45. </el-form-item>
  46. <el-form-item>
  47. <el-button
  48. type="primary"
  49. icon="el-icon-search"
  50. size="mini"
  51. @click="handleQuery"
  52. >搜索</el-button
  53. >
  54. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="reset1"
  55. >重置</el-button
  56. >
  57. </el-form-item>
  58. </el-form>
  59. <el-table
  60. v-loading="loading"
  61. :data="expandList"
  62. @selection-change="handleSelectionChange"
  63. >
  64. <el-table-column type="selection" width="55" align="center" />
  65. <!-- <el-table-column label="容量信息ID" align="center" prop="expandId" /> -->
  66. <el-table-column label="空间名称" align="center" prop="spaceName" />
  67. <el-table-column label="当前容量" align="center" prop="currentCap" />
  68. <el-table-column label="扩充容量" align="center" prop="expandCap" />
  69. <el-table-column label="申请理由" align="center" prop="remark" />
  70. <el-table-column label="扩容状态" align="center" prop="expandStatus">
  71. <template slot-scope="scope">
  72. <dict-tag
  73. :options="dict.type.expand_status"
  74. :value="scope.row.expandStatus"
  75. />
  76. </template>
  77. </el-table-column>
  78. <el-table-column label="申请人" align="center" prop="createBy" />
  79. <el-table-column
  80. label="申请时间"
  81. align="center"
  82. prop="createTime"
  83. width="150"
  84. >
  85. <template slot-scope="scope">
  86. <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
  87. </template>
  88. </el-table-column>
  89. <el-table-column
  90. label="申请理由"
  91. align="center"
  92. prop="remark"
  93. width="150"
  94. />
  95. <el-table-column
  96. label="操作"
  97. align="center"
  98. class-name="small-padding fixed-width"
  99. >
  100. <template slot-scope="scope" v-if="operat">
  101. <el-button
  102. size="mini"
  103. type="text"
  104. icon="el-icon-check"
  105. @click="handleYes(scope.row)"
  106. v-hasPermi="['doc:expand:edit']"
  107. >同意扩容</el-button
  108. >
  109. <el-button
  110. size="mini"
  111. type="text"
  112. icon="el-icon-close"
  113. @click="handleNo(scope.row)"
  114. v-hasPermi="['doc:expand:edit']"
  115. >拒绝扩容</el-button
  116. >
  117. </template>
  118. </el-table-column>
  119. </el-table>
  120. <pagination
  121. v-show="total > 0"
  122. :total="total"
  123. :page.sync="queryParams.pageNum"
  124. :limit.sync="queryParams.pageSize"
  125. @pagination="getList"
  126. />
  127. <!-- 添加或修改扩容申请对话框 -->
  128. <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  129. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  130. <el-form-item label="空间ID" prop="spaceId">
  131. <el-input v-model="form.spaceId" placeholder="请输入空间ID" />
  132. </el-form-item>
  133. <el-form-item label="空间名称" prop="spaceName">
  134. <el-input v-model="form.spaceName" placeholder="请输入空间名称" />
  135. </el-form-item>
  136. <el-form-item label="当前容量" prop="currentCap">
  137. <el-input v-model="form.currentCap" placeholder="请输入当前容量" />
  138. </el-form-item>
  139. <el-form-item label="扩充容量" prop="expandCap">
  140. <el-input v-model="form.expandCap" placeholder="请输入扩充容量" />
  141. </el-form-item>
  142. <el-form-item label="扩容状态" prop="expandStatus">
  143. <el-radio-group v-model="form.expandStatus">
  144. <el-radio v-for="dict in dict.type.expand_status" :key="dict.value"
  145. :label="dict.value">{{dict.label}}</el-radio>
  146. </el-radio-group>
  147. </el-form-item>
  148. <el-form-item label="备注" prop="remark">
  149. <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
  150. </el-form-item>
  151. <el-form-item label="逻辑删除标志;1/非1" prop="isDel">
  152. <el-input v-model="form.isDel" placeholder="请输入逻辑删除标志;1/非1" />
  153. </el-form-item>
  154. </el-form>
  155. <div slot="footer" class="dialog-footer">
  156. <el-button type="primary" @click="submitForm">确 定</el-button>
  157. <el-button @click="cancel">取 消</el-button>
  158. </div>
  159. </el-dialog> -->
  160. </div>
  161. </div>
  162. </div>
  163. </template>
  164. <script>
  165. import {
  166. listExpand,
  167. getExpand,
  168. delExpand,
  169. addExpand,
  170. yesExpand,
  171. noExpand,
  172. updateExpand,
  173. } from "@/api/doc/expand";
  174. import { createLogger } from "vuex";
  175. export default {
  176. name: "Expand",
  177. dicts: ["expand_status"],
  178. data() {
  179. return {
  180. //判断是否为申请状态
  181. operat: true,
  182. // 遮罩层
  183. loading: true,
  184. // 选中数组
  185. ids: [],
  186. // 非单个禁用
  187. single: true,
  188. // 非多个禁用
  189. multiple: true,
  190. // 显示搜索条件
  191. showSearch: true,
  192. // 总条数
  193. total: 0,
  194. // 扩容申请表格数据
  195. expandList: [],
  196. // 弹出层标题
  197. title: "",
  198. // 是否显示弹出层
  199. open: false,
  200. // 查询参数
  201. queryParams: {
  202. pageNum: 1,
  203. pageSize: 10,
  204. spaceName: null,
  205. currentCap: null,
  206. expandCap: null,
  207. expandStatus: null,
  208. },
  209. // 表单参数
  210. form: {},
  211. // 表单校验
  212. rules: {
  213. spaceName: [
  214. {
  215. required: true,
  216. message: "空间名称不能为空",
  217. trigger: "blur",
  218. },
  219. ],
  220. expandCap: [
  221. {
  222. required: true,
  223. message: "扩充容量不能为空",
  224. trigger: "blur",
  225. },
  226. ],
  227. remark: [
  228. {
  229. required: true,
  230. message: "备注不能为空",
  231. trigger: "blur",
  232. },
  233. ],
  234. },
  235. };
  236. },
  237. created() {
  238. this.queryParams.expandStatus = "1";
  239. this.getList();
  240. },
  241. methods: {
  242. /** 查询扩容申请列表 */
  243. getList() {
  244. this.loading = true;
  245. listExpand(this.queryParams).then((response) => {
  246. this.expandList = response.rows;
  247. this.total = response.total;
  248. this.loading = false;
  249. });
  250. },
  251. // 取消按钮
  252. cancel() {
  253. this.open = false;
  254. this.reset();
  255. },
  256. // 表单重置
  257. reset() {
  258. this.form = {
  259. expandId: null,
  260. spaceId: null,
  261. spaceName: null,
  262. currentCap: null,
  263. expandCap: null,
  264. expandStatus: 1,
  265. createBy: null,
  266. createTime: null,
  267. updateBy: null,
  268. updateTime: null,
  269. remark: null,
  270. isDel: null,
  271. };
  272. this.resetForm("form");
  273. },
  274. /** 搜索按钮操作 */
  275. handleQuery() {
  276. this.queryParams.pageNum = 1;
  277. this.getList();
  278. if (this.queryParams.expandStatus !== "1") {
  279. this.operat = false;
  280. } else {
  281. this.operat = true;
  282. }
  283. },
  284. /** 重置按钮操作 */
  285. resetQuery() {
  286. this.resetForm("queryForm");
  287. this.handleQuery();
  288. },
  289. // 多选框选中数据
  290. handleSelectionChange(selection) {
  291. this.ids = selection.map((item) => item.expandId);
  292. this.single = selection.length !== 1;
  293. this.multiple = !selection.length;
  294. },
  295. /** 新增按钮操作 */
  296. handleAdd() {
  297. this.reset();
  298. this.open = true;
  299. this.title = "添加扩容申请";
  300. },
  301. /** 修改按钮操作 */
  302. handleUpdate(row) {
  303. this.reset();
  304. const expandId = row.expandId || this.ids;
  305. getExpand(expandId).then((response) => {
  306. this.form = response.data;
  307. this.open = true;
  308. this.title = "修改扩容申请";
  309. });
  310. },
  311. /** 同意按钮操作 */
  312. handleYes(row) {
  313. this.$modal
  314. .confirm("确认同意 " + row.spaceName + ' 扩容申请"?')
  315. .then(function () {
  316. return yesExpand(row.expandId);
  317. })
  318. .then(() => {
  319. this.getList();
  320. this.$modal.msgSuccess("同意扩容成功!");
  321. })
  322. .catch(() => {});
  323. },
  324. /** 拒绝按钮操作 */
  325. handleNo(row) {
  326. this.$modal
  327. .confirm("确认拒绝 " + row.spaceName + ' 扩容申请"?')
  328. .then(function () {
  329. return noExpand(row.expandId);
  330. })
  331. .then(() => {
  332. this.getList();
  333. this.$modal.msgSuccess("拒绝扩容成功!");
  334. })
  335. .catch(() => {});
  336. },
  337. /** 提交按钮 */
  338. submitForm() {
  339. this.$refs["form"].validate((valid) => {
  340. if (valid) {
  341. if (this.form.expandId != null) {
  342. updateExpand(this.form).then((response) => {
  343. this.$modal.msgSuccess("修改成功");
  344. this.open = false;
  345. this.getList();
  346. });
  347. } else {
  348. addExpand(this.form).then((response) => {
  349. this.$modal.msgSuccess("新增成功");
  350. this.open = false;
  351. this.getList();
  352. });
  353. }
  354. }
  355. });
  356. },
  357. /** 删除按钮操作 */
  358. handleDelete(row) {
  359. const expandIds = row.expandId || this.ids;
  360. this.$modal
  361. .confirm('是否确认删除扩容申请编号为"' + expandIds + '"的数据项?')
  362. .then(function () {
  363. return delExpand(expandIds);
  364. })
  365. .then(() => {
  366. this.getList();
  367. this.$modal.msgSuccess("删除成功");
  368. })
  369. .catch(() => {});
  370. },
  371. /** 导出按钮操作 */
  372. handleExport() {
  373. this.download(
  374. "doc/expand/export",
  375. {
  376. ...this.queryParams,
  377. },
  378. `expand_${new Date().getTime()}.xlsx`
  379. );
  380. },
  381. },
  382. };
  383. </script>
  384. <style scoped lang='scss'>
  385. .containe {
  386. color: #7ea4c8;
  387. font-size: 0.14rem;
  388. font-family: PingFang SC-Medium, PingFang SC;
  389. font-weight: 500;
  390. padding-left: calc(100vw * (20 / 1920));
  391. //顶部信息
  392. // .header {
  393. // width: calc(100vw * (300 / 1920));
  394. // height: calc(100vh * (22 / 1080));
  395. // margin-top: calc(100vh * (20 / 1080));
  396. // margin-bottom: calc(100vh * (20 / 1080));
  397. // display: flex;
  398. // align-items: center;
  399. // img {
  400. // width: calc(100vw * (16 / 1920));
  401. // height: calc(100vh * (16 / 1080));
  402. // border: 1px dashed grey;
  403. // margin-left: 3px;
  404. // margin-right: 3px;
  405. // }
  406. // .top1 {
  407. // color: #2e8aecff;
  408. // }
  409. // }
  410. // //中间目录列表
  411. // .title {
  412. // height: calc(100vh * (22 / 1080));
  413. // margin-top: calc(100vh * (20 / 1080));
  414. // margin-bottom: calc(100vh * (20 / 1080));
  415. // color: #ffffffff;
  416. // font-size: 0.16rem;
  417. // font-weight: bold;
  418. // line-height: calc(100vh * (22 / 1080));
  419. // }
  420. .main {
  421. width: calc(100vw * (1876 / 1920));
  422. height: calc(100vh * (930 / 1080));
  423. background: url(../../../assets/img/Group-610.png);
  424. background-size: calc(100vw * (1876 / 1920)) calc(100vh * (930 / 1080));
  425. margin-top: calc(100vh * (35 / 1080));
  426. h3 {
  427. font-size: 0.2rem;
  428. color: #ffffffff;
  429. padding-top: calc(100vh * (30 / 1080));
  430. padding-bottom: calc(100vh * (10 / 1080));
  431. padding-left: calc(100vw * (30 / 1920));
  432. }
  433. .main-main {
  434. width: calc(100vw * (1822 / 1920));
  435. height: calc(100vh * (850 / 1080));
  436. margin-left: calc(100vw * (25 / 1920));
  437. margin-top: calc(100vh * (20 / 1080));
  438. // background: seagreen;
  439. .el-table {
  440. width: calc(100vw * (1822 / 1920));
  441. height: calc(100vh * (700 / 1080));
  442. background: transparent;
  443. overflow: auto;
  444. }
  445. .reset1 {
  446. color: #2e8aecff;
  447. background: transparent;
  448. border: 1px solid #2e8aecff;
  449. }
  450. }
  451. //滚动条样式
  452. // ::-webkit-scrollbar {
  453. // width: 3.5px;
  454. // }
  455. // ::-webkit-scrollbar-track {
  456. // background-color: rgba(0, 0, 0, 0);
  457. // }
  458. // ::-webkit-scrollbar-thumb {
  459. // background: #2e8aec;
  460. // border-radius: 3px;
  461. // }
  462. // ::-webkit-scrollbar-thumb:hover {
  463. // background: #2e8aec;
  464. // }
  465. }
  466. }
  467. //底部跳转
  468. ::v-deep .pagination-container {
  469. height: calc(100vh * (50 / 1080));
  470. background: transparent;
  471. }
  472. ::v-deep .pagination-container .el-pagination {
  473. top: -10px;
  474. }
  475. //table样式
  476. ::v-deep .el-table th {
  477. background: #016c9aa6;
  478. color: #2e8aec;
  479. }
  480. ::v-deep .el-table tr {
  481. background: transparent;
  482. }
  483. ::v-deep .el-table tbody tr:hover > td {
  484. background-color: #016c9a78 !important;
  485. }
  486. ::v-deep .el-table td.el-table__cell {
  487. border-bottom: 1px solid #006c9aff;
  488. }
  489. ::v-deep .el-table th.el-table__cell.is-leaf {
  490. border-bottom: 1px solid #006c9aff;
  491. }
  492. ::v-deep .el-form-item__label {
  493. color: #2e8aecff;
  494. }
  495. ::v-deep .el-input__inner {
  496. background: transparent;
  497. border: 1px solid #01d1ffff;
  498. color: #006c9aff;
  499. }
  500. //table底下白线消失处理
  501. ::v-deep .el-table {
  502. color: #ffffffff;
  503. }
  504. ::v-deep .el-table::before {
  505. width: 0;
  506. }
  507. //按钮样式
  508. // ::v-deep .el-button {
  509. // background-color: #002a5cff;
  510. // color: #1890ff;
  511. // border: none;
  512. // }
  513. //下拉选项样式
  514. ::v-deep .el-select-dropdown__list {
  515. background: #0F1540FF;
  516. }
  517. ::v-deep .el-select-dropdown {
  518. border: none;
  519. }
  520. ::v-deep .el-select-dropdown__item.hover {
  521. background: #0F1540FF;
  522. }
  523. ::v-deep li{
  524. color: #006C9AFF;
  525. }
  526. ::v-deep .el-select-dropdown__item.selected{
  527. color: #006C9AFF;
  528. font-weight: 500;
  529. }
  530. ::v-deep .el-select-dropdown__item.selected:hover{
  531. color: #FFFFFFFF;
  532. }
  533. ::v-deep li:hover {
  534. background: #1E497CFF !important;
  535. color: #FFFFFFFF;
  536. }
  537. </style>