Newer
Older
Nanping_sponge_SJJC / src / views / system / caseManagement / index.vue
@liyingjing liyingjing on 25 Oct 2023 16 KB 数据检测
  1. <template>
  2. <div class="app-container">
  3. <el-form
  4. :model="queryParams"
  5. ref="queryRef"
  6. :inline="true"
  7. v-show="showSearch"
  8. >
  9. <el-form-item label="" prop="platformName">
  10. <el-input
  11. v-model="queryParams.platformName"
  12. placeholder="请输入项目名称"
  13. clearable
  14. style="width: 200px"
  15. @keyup.enter="handleQuery"
  16. />
  17. </el-form-item>
  18. <el-form-item>
  19. <el-button type="primary" icon="Search" @click="handleQuery"
  20. >搜索</el-button
  21. >
  22. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  23. </el-form-item>
  24. </el-form>
  25.  
  26. <el-row :gutter="10" class="mb8">
  27. <el-col :span="1.5">
  28. <el-button type="primary" plain icon="Plus" @click="handleAdd"
  29. >新增</el-button
  30. >
  31. </el-col>
  32.  
  33. <el-col :span="1.5">
  34. <el-button
  35. type="danger"
  36. plain
  37. icon="Delete"
  38. :disabled="multiple"
  39. @click="handleDelete"
  40. >删除</el-button
  41. >
  42. </el-col>
  43. <right-toolbar
  44. v-model:showSearch="showSearch"
  45. @queryTable="getList"
  46. ></right-toolbar>
  47. </el-row>
  48.  
  49. <el-table
  50. v-loading="loading"
  51. :data="platformJumpList"
  52. border
  53. @selection-change="handleSelectionChange"
  54. >
  55. <el-table-column type="selection" width="55" align="center" />
  56. <el-table-column label="序号" align="center" type="index" width="70" />
  57. <el-table-column
  58. label="项目名称"
  59. align="center"
  60. prop="platformName"
  61. :show-overflow-tooltip="true"
  62. />
  63. <el-table-column label="地址" align="center" prop="platformLinkAddress">
  64. </el-table-column>
  65. <el-table-column
  66. label="所属类型"
  67. align="center"
  68. prop="category"
  69. width="100"
  70. >
  71. <template #default="scope">
  72. <dict-tag :options="category_type" :value="scope.row.category" />
  73. </template>
  74. </el-table-column>
  75. <el-table-column label="状态" align="center" prop="status" width="100">
  76. <template #default="scope">
  77. <dict-tag :options="platformJump_state" :value="scope.row.status" />
  78. </template>
  79. </el-table-column>
  80. <el-table-column
  81. label="浏览次数"
  82. align="center"
  83. prop="browseNum"
  84. width="100"
  85. >
  86. </el-table-column>
  87. <el-table-column
  88. label="是否显示"
  89. align="center"
  90. prop="isShow"
  91. width="100"
  92. >
  93. <!-- <template #default="scope">
  94. <dict-tag :options="is_state" :value="scope.row.isShow" />
  95. </template> -->
  96. <template #default="scope">
  97. <el-switch
  98. v-model="scope.row.isShow"
  99. :active-value="1"
  100. :inactive-value="0"
  101. @change="handleStatusChange(scope.row)"
  102. ></el-switch>
  103. </template>
  104. </el-table-column>
  105. <el-table-column
  106. label="创建人"
  107. align="center"
  108. prop="createBy"
  109. width="100"
  110. />
  111. <el-table-column
  112. label="创建时间"
  113. align="center"
  114. prop="createTime"
  115. width="200"
  116. >
  117. </el-table-column>
  118. <el-table-column
  119. label="操作"
  120. align="center"
  121. class-name="small-padding fixed-width"
  122. width="240"
  123. >
  124. <template #default="scope">
  125. <el-button
  126. link
  127. type="primary"
  128. icon="Edit"
  129. @click="handleUpdate(scope.row)"
  130. >修改</el-button
  131. >
  132. <el-button
  133. link
  134. type="primary"
  135. icon="Delete"
  136. @click="handleDelete(scope.row)"
  137. >删除</el-button
  138. >
  139. <el-button
  140. link
  141. type="primary"
  142. icon="View"
  143. @click="handleAddConfigPerson(scope.row)"
  144. >配置人员</el-button
  145. >
  146. </template>
  147. </el-table-column>
  148. </el-table>
  149.  
  150. <pagination
  151. v-show="total > 0"
  152. :total="total"
  153. v-model:page="queryParams.pageNum"
  154. v-model:limit="queryParams.pageSize"
  155. @pagination="getList"
  156. />
  157.  
  158. <!-- 添加或修改案例对话框 -->
  159. <el-dialog :title="title" v-model="open" width="900px" append-to-body>
  160. <el-form
  161. ref="platformJumpRef"
  162. :model="form"
  163. :rules="rules"
  164. label-width="120px"
  165. >
  166. <el-row>
  167. <el-col :span="24">
  168. <el-form-item label="项目名称" prop="platformName">
  169. <el-input
  170. v-model="form.platformName"
  171. placeholder="请输入项目名称"
  172. />
  173. </el-form-item>
  174. </el-col>
  175. <el-col :span="24">
  176. <el-form-item label="项目地址" prop="platformLinkAddress">
  177. <el-input
  178. v-model="form.platformLinkAddress"
  179. placeholder="请输入项目地址"
  180. />
  181. </el-form-item>
  182. </el-col>
  183.  
  184. <el-col :span="12">
  185. <el-form-item label="是否显示">
  186. <el-radio-group v-model="form.isShow">
  187. <el-radio
  188. v-for="dict in is_state"
  189. :key="dict.value"
  190. :label="dict.value"
  191. >{{ dict.label }}</el-radio
  192. >
  193. </el-radio-group>
  194. </el-form-item>
  195. </el-col>
  196.  
  197. <el-col :span="12">
  198. <el-form-item label="所属类别" prop="category">
  199. <el-select v-model="form.category" placeholder="请选择">
  200. <el-option
  201. v-for="dict in category_type"
  202. :key="dict.value"
  203. :label="dict.label"
  204. :value="dict.value"
  205. ></el-option>
  206. </el-select>
  207. </el-form-item>
  208. </el-col>
  209. <el-col :span="12">
  210. <el-form-item label="状态" prop="status">
  211. <el-select v-model="form.status" placeholder="请选择">
  212. <el-option
  213. v-for="dict in platformJump_state"
  214. :key="dict.value"
  215. :label="dict.label"
  216. :value="dict.value"
  217. ></el-option>
  218. </el-select>
  219. </el-form-item>
  220. </el-col>
  221. <el-col :span="12">
  222. <el-form-item label="项目商务" prop="projectBusiness">
  223. <el-select v-model="form.projectBusiness" placeholder="请选择">
  224. <el-option
  225. v-for="dict in chargeUser_list"
  226. :key="dict.userId"
  227. :label="dict.nickName"
  228. :value="dict.userId"
  229. ></el-option>
  230. </el-select>
  231. </el-form-item>
  232. </el-col>
  233. <el-col :span="12">
  234. <el-form-item label="技术负责人" prop="technicalLeader">
  235. <el-select v-model="form.technicalLeader" placeholder="请选择">
  236. <el-option
  237. v-for="dict in chargeUser_list"
  238. :key="dict.userId"
  239. :label="dict.nickName"
  240. :value="dict.userId"
  241. ></el-option>
  242. </el-select>
  243. </el-form-item>
  244. </el-col>
  245. <el-col :span="12">
  246. <el-form-item label="工程项目经理" prop="projectManager">
  247. <el-select v-model="form.projectManager" placeholder="请选择">
  248. <el-option
  249. v-for="dict in chargeUser_list"
  250. :key="dict.userId"
  251. :label="dict.nickName"
  252. :value="dict.userId"
  253. ></el-option>
  254. </el-select>
  255. </el-form-item>
  256. </el-col>
  257. <el-col :span="12">
  258. <el-form-item label="软件负责人" prop="softwareManager">
  259. <el-select v-model="form.softwareManager" placeholder="请选择">
  260. <el-option
  261. v-for="dict in chargeUser_list"
  262. :key="dict.userId"
  263. :label="dict.nickName"
  264. :value="dict.userId"
  265. ></el-option>
  266. </el-select>
  267. </el-form-item>
  268. </el-col>
  269. <el-col :span="12">
  270. <el-form-item label="运维人员" prop="maintenancePersonnel">
  271. <el-select
  272. v-model="form.maintenancePersonnel"
  273. placeholder="请选择"
  274. >
  275. <el-option
  276. v-for="dict in chargeUser_list"
  277. :key="dict.userId"
  278. :label="dict.nickName"
  279. :value="dict.userId"
  280. ></el-option>
  281. </el-select>
  282. </el-form-item>
  283. </el-col>
  284. <el-col :span="24">
  285. <el-form-item label="首页图片" prop="picture">
  286. <ImageUpload
  287. :isBackName="true"
  288. v-model:modelValue="form.picture"
  289. ></ImageUpload>
  290. </el-form-item>
  291. </el-col>
  292. </el-row>
  293. </el-form>
  294. <template #footer>
  295. <div class="dialog-footer">
  296. <el-button type="primary" @click="submitForm">确 定</el-button>
  297. <el-button @click="cancel">取 消</el-button>
  298. </div>
  299. </template>
  300. </el-dialog>
  301. <!-- 详情 -->
  302. <el-dialog
  303. title="配置人员"
  304. v-model="configOpen"
  305. width="700px"
  306. append-to-body
  307. >
  308. <el-transfer
  309. v-model="addConfigPerson.userId"
  310. filterable
  311. :titles="['所有人员', '已选人员']"
  312. :filter-method="filterMethod"
  313. filter-placeholder="搜索人员"
  314. :data="chargeUser_list"
  315. :props="{
  316. key: 'userId',
  317. label: 'nickName',
  318. }"
  319. style="margin-top: 20px"
  320. />
  321. <template #footer>
  322. <div class="dialog-footer">
  323. <el-button type="primary" @click="submitConfigPersonForm"
  324. >确 定</el-button
  325. >
  326. <el-button @click="configOpen = false">关 闭</el-button>
  327. </div>
  328. </template>
  329. </el-dialog>
  330. </div>
  331. </template>
  332.  
  333. <script setup name="caseManagement">
  334. import {
  335. pageCase,
  336. getCase,
  337. delCase,
  338. addCase,
  339. updateCase,
  340. } from "@/api/system/caseManagement";
  341. import {
  342. listPlatformJumpUser,
  343. addPlatformJumpUser,
  344. } from "@/api/system/platformJumpUser";
  345. import { listUser } from "@/api/system/user";
  346. import { fileList } from "@/api/system/file.js";
  347.  
  348. const { proxy } = getCurrentInstance();
  349. const is_state = proxy.fixDict["isState"]; //是否字典
  350. const platformJump_state = proxy.fixDict["platformJumpState"];
  351. const { category_type } = proxy.useDict("category_type");
  352.  
  353. const platformJumpList = ref([]);
  354. const open = ref(false);
  355. const loading = ref(true);
  356. const showSearch = ref(true);
  357. const ids = ref([]);
  358. const single = ref(true);
  359. const multiple = ref(true);
  360. const total = ref(0);
  361. const title = ref("");
  362. const configOpen = ref(false);
  363. const chargeUser_list = ref([]); //人员
  364. const currentRow = ref({}); //当前数据
  365. const data = reactive({
  366. form: {
  367. isShow: "1",
  368. status: 0,
  369. },
  370. queryParams: {
  371. pageNum: 1,
  372. pageSize: 10,
  373. platformName: undefined,
  374. },
  375. rules: {
  376. platformName: [
  377. { required: true, message: "项目名称不能为空", trigger: "blur" },
  378. ],
  379. platformLinkAddress: [
  380. { required: true, message: "项目地址不能为空", trigger: "blur" },
  381. ],
  382. category: [
  383. { required: true, message: "所属类别不能为空", trigger: "change" },
  384. ],
  385. projectBusiness: [
  386. { required: true, message: "项目商务不能为空", trigger: "change" },
  387. ],
  388. },
  389. addConfigPerson: { userId: [], queryParams: { nickName: "" } }, //详情弹框
  390. });
  391.  
  392. const { queryParams, form, rules, addConfigPerson } = toRefs(data);
  393.  
  394. //查询负责人列表
  395. function getUserList() {
  396. listUser().then((res) => {
  397. chargeUser_list.value = res.data;
  398. });
  399. }
  400.  
  401. /** 查询案例列表 */
  402. function getList() {
  403. loading.value = true;
  404. pageCase(queryParams.value).then((response) => {
  405. platformJumpList.value = response.data;
  406. total.value = response.total;
  407. loading.value = false;
  408. });
  409. }
  410. // 多选框选中数据
  411. function handleSelectionChange(selection) {
  412. ids.value = selection.map((item) => item.id);
  413. single.value = selection.length != 1;
  414. multiple.value = !selection.length;
  415. }
  416. /** 取消按钮 */
  417. function cancel() {
  418. open.value = false;
  419. reset();
  420. }
  421. /** 表单重置 */
  422. function reset() {
  423. form.value = {
  424. id: undefined,
  425. category: "",
  426. completedAddress: "",
  427. maintenancePersonnel: "",
  428. platformCode: "",
  429. platformLinkAddress: "",
  430. platformName: "",
  431. platformValidateMethod: "",
  432. platformValidateUrl: "",
  433. projectBusiness: "",
  434. projectManager: "",
  435. softwareManager: "",
  436. status: 0,
  437. technicalLeader: "",
  438. uncompletedAddress: "",
  439. isShow: "1",
  440. picture: [],
  441. };
  442. proxy.resetForm("platformJumpRef");
  443. }
  444. /** 搜索按钮操作 */
  445. function handleQuery() {
  446. queryParams.value.pageNum = 1;
  447. getList();
  448. }
  449. /** 重置按钮操作 */
  450. function resetQuery() {
  451. proxy.resetForm("queryRef");
  452. handleQuery();
  453. }
  454.  
  455. /** 新增按钮操作 */
  456. function handleAdd() {
  457. reset();
  458. open.value = true;
  459. title.value = "添加案例";
  460. }
  461. /**修改按钮操作 */
  462. function handleUpdate(row) {
  463. reset();
  464. const id = row.id || ids.value;
  465. getCase(id).then((response) => {
  466. response.data.isShow = response.data.isShow.toString();
  467. form.value = response.data;
  468. open.value = true;
  469. title.value = "修改案例";
  470. getFileList(row);
  471. });
  472. }
  473.  
  474. //获取图片
  475. function getFileList(row) {
  476. fileList({ refId: row.id, refType: "projectDemo" }).then((res) => {
  477. form.value.picture = res.data;
  478. });
  479. }
  480.  
  481. /** 提交按钮 */
  482. function submitForm() {
  483. proxy.$refs["platformJumpRef"].validate((valid) => {
  484. if (valid) {
  485. form.value.fileSaveRequestList = [];
  486. if (form.value.picture) {
  487. form.value.fileSaveRequestList = form.value.picture.map((item) => {
  488. return {
  489. name: item.name,
  490. refField: "home.picture",
  491. refType: "projectDemo",
  492. url: item.url,
  493. };
  494. });
  495. }
  496.  
  497. if (form.value.id != undefined) {
  498. updateCase(form.value).then((response) => {
  499. proxy.$modal.msgSuccess("修改成功");
  500. open.value = false;
  501. getList();
  502. });
  503. } else {
  504. addCase(form.value).then((response) => {
  505. proxy.$modal.msgSuccess("新增成功");
  506. open.value = false;
  507. getList();
  508. });
  509. }
  510. }
  511. });
  512. }
  513. /** 删除按钮操作 */
  514. function handleDelete(row) {
  515. const id = row.id || ids.value;
  516. proxy.$modal
  517. .confirm('是否确认删除案例编号为"' + id + '"的数据项?')
  518. .then(function () {
  519. return delCase(id);
  520. })
  521. .then(() => {
  522. getList();
  523. proxy.$modal.msgSuccess("删除成功");
  524. })
  525. .catch(() => {});
  526. }
  527.  
  528. //配置人员
  529. function handleAddConfigPerson(row) {
  530. configOpen.value = true;
  531. currentRow.value = row;
  532. listPlatformJumpUser({ jumpId: row.id }).then((res) => {
  533. let data = res.data;
  534. addConfigPerson.value.userId = data.map((item) => {
  535. return Number(item.userAccount);
  536. });
  537. });
  538. }
  539.  
  540. //提交配置人员选择
  541. function submitConfigPersonForm() {
  542. let data = addConfigPerson.value.userId.map((val) => {
  543. return {
  544. jumpId: currentRow.value.id,
  545. userAccount: val,
  546. };
  547. });
  548. addPlatformJumpUser(data, currentRow.value.id).then((res) => {
  549. configOpen.value = false;
  550. proxy.$modal.msgSuccess(`配置成功`);
  551. });
  552. }
  553.  
  554. //隐藏操作
  555. function handleStatusChange(row) {
  556. let text = row.isShow == 0 ? "隐藏" : "显示";
  557. form.value = row;
  558. fileList({ refId: row.id, refType: "news" }).then((res) => {
  559. form.value.picture = res.data;
  560. proxy.$modal
  561. .confirm(`是否确认${text}案例?`)
  562. .then(function () {
  563. form.value.isShow = row.isShow == 0 ? 0 : 1;
  564. form.value.fileSaveRequestList = [];
  565. if (form.value.picture) {
  566. form.value.fileSaveRequestList = form.value.picture.map((item) => {
  567. return {
  568. name: item.name,
  569. refField: "home.picture",
  570. refType: "news",
  571. url: item.url,
  572. };
  573. });
  574. }
  575. return updateCase(form.value);
  576. })
  577. .then(() => {
  578. getList();
  579. proxy.$modal.msgSuccess(`${text}成功`);
  580. })
  581. .catch(() => {
  582. row.isShow = row.isShow == 0 ? 1 : 0;
  583. });
  584. });
  585. }
  586.  
  587. getList();
  588. getUserList();
  589. </script>