project-message.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <script setup>
  2. import { propertyData } from "../configs/properites";
  3. import moduleDialog from "@/views//modules/project-config/components/test-module-dialog.vue";
  4. import TitleHeader from "@/views/modules/project-config/com/titleHeader.vue";
  5. import { delTestModule } from "@/api/project";
  6. import { useCommonStoreHook } from "@/store";
  7. import { getProjectById, getTestProjectList } from "@/api/project/index";
  8. const { currentTestItemId } = toRefs(useCommonStoreHook());
  9. const emits = defineEmits(["onClickItem"]);
  10. const router = useRouter();
  11. const route = useRoute();
  12. const goGlobalConfig = () => {
  13. router.push({
  14. name: "GlobalConfig",
  15. params: { engineerId: route?.params?.engineerId },
  16. });
  17. };
  18. // 当前正在配置的项目信息
  19. const currentProject = ref();
  20. onMounted(() => {
  21. getProjectById(route?.params?.engineerId).then((res) => {
  22. currentProject.value = res.data;
  23. toGetTestProjectList();
  24. });
  25. });
  26. const testProjectList = ref([]);
  27. const toGetTestProjectList = () => {
  28. // 获取完配置工程信息后,获取测试项目列表
  29. getTestProjectList({
  30. engineeringId: currentProject.value.id,
  31. }).then((res) => {
  32. testProjectList.value = res.data ?? [];
  33. });
  34. };
  35. let clickItem = null;
  36. // 当点击了项目
  37. const clickTestProjectItem = (item) => {
  38. let data = JSON.parse(JSON.stringify(item));
  39. clickItem = data;
  40. currentTestItemId.value = item.id;
  41. emits("onClickItem", data);
  42. };
  43. const moduleDialogRef = ref();
  44. //新增测试项目
  45. const addProject = () => {
  46. moduleDialogRef.value.openDialog(false, null, route?.params?.engineerId);
  47. };
  48. //修改测试项目
  49. const editProject = () => {
  50. clickItem &&
  51. moduleDialogRef.value.openDialog(
  52. true,
  53. clickItem,
  54. route?.params?.engineerId
  55. );
  56. };
  57. //删除测试项目
  58. const confirmEvent = () => {
  59. if (currentTestItemId.value) {
  60. delTestModule({
  61. id: currentTestItemId.value,
  62. }).then((res) => {
  63. currentTestItemId.value = "";
  64. toGetTestProjectList(); //重新获取
  65. });
  66. }
  67. };
  68. </script>
  69. <template>
  70. <div class="project-message-col">
  71. <TitleHeader> 工程信息</TitleHeader>
  72. <div class="project-msg-item">
  73. <span class="text-l">产品:</span>
  74. <span class="text-r">{{ currentProject?.engineeringProductName }}</span>
  75. <!-- <span class="edit">-->
  76. <!-- <svg-icon icon-class="homeIcon2" />-->
  77. <!-- </span>-->
  78. </div>
  79. <div class="project-msg-item">
  80. <span class="text-l">工程类型:</span
  81. ><span class="text-r">{{ currentProject?.engineeringType }}</span>
  82. </div>
  83. <div class="project-msg-item">
  84. <span class="text-l">版本:</span
  85. ><span class="text-r">{{ currentProject?.engineeringVersion }}</span>
  86. </div>
  87. <div class="project-msg-item">
  88. <!-- <span class="text-l">更新时间:</span>-->
  89. <span class="text-r">{{ currentProject?.updated }}</span>
  90. </div>
  91. <div class="project-all-config" @click="goGlobalConfig">
  92. <svg-icon icon-class="project-config" />
  93. 全局配置
  94. </div>
  95. <div class="project-test-btn">
  96. <div class="name">测试项目</div>
  97. <div class="btn">
  98. <el-popconfirm
  99. width="220"
  100. confirm-button-text="确认"
  101. cancel-button-text="取消"
  102. title="是否删除"
  103. @confirm="confirmEvent"
  104. >
  105. <template #reference>
  106. <span class="edit">
  107. <svg-icon icon-class="jianHao" />
  108. </span>
  109. </template>
  110. </el-popconfirm>
  111. <span class="edit" @click="addProject">
  112. <svg-icon icon-class="addHao" />
  113. </span>
  114. <span class="edit" @click="editProject">
  115. <svg-icon icon-class="homeIcon2" />
  116. </span>
  117. </div>
  118. </div>
  119. <div class="project-list-cont">
  120. <el-scrollbar>
  121. <div
  122. class="project-list-item"
  123. :class="[
  124. item.id === currentTestItemId ? 'selected-item' : 'normal-item',
  125. ]"
  126. v-for="item in testProjectList"
  127. :key="item.id"
  128. @click="clickTestProjectItem(item)"
  129. >
  130. {{ item.projectName }}
  131. </div>
  132. </el-scrollbar>
  133. </div>
  134. </div>
  135. <moduleDialog ref="moduleDialogRef" @saveFinish="toGetTestProjectList" />
  136. </template>
  137. <style scoped lang="scss">
  138. .project-message-col {
  139. width: 200px;
  140. flex-shrink: 0;
  141. height: calc(100vh - $main-header-height);
  142. background-color: $hj-black-2;
  143. border-right: 1px solid $hj-white-4;
  144. .project-msg-item {
  145. position: relative;
  146. padding: 0 11px;
  147. margin-bottom: 10px;
  148. .text-l {
  149. font-size: var(--hj-fs-12);
  150. color: var(--fc-color-3);
  151. }
  152. .text-r {
  153. font-size: var(--hj-fs-14);
  154. color: var(--hj-white-1);
  155. }
  156. .edit {
  157. cursor: pointer;
  158. position: absolute;
  159. right: 20px;
  160. color: var(--hj-white-1);
  161. }
  162. }
  163. .project-all-config {
  164. width: 130px;
  165. height: 36px;
  166. line-height: 36px;
  167. margin: 0 auto;
  168. background: var(--fc-color-7);
  169. color: var(--hj-white-1);
  170. text-align: center;
  171. border-radius: 4px 4px 4px 4px;
  172. cursor: pointer;
  173. }
  174. .project-test-btn {
  175. display: flex;
  176. justify-content: space-between;
  177. margin: 0 12px;
  178. margin-top: 12px;
  179. position: relative;
  180. padding: 14px 0;
  181. &::before {
  182. position: absolute;
  183. top: 0;
  184. content: "";
  185. display: block;
  186. width: 100%;
  187. height: 1px;
  188. background-color: var(--hj-white-4);
  189. }
  190. .name {
  191. font-size: var(--hj-fs-14);
  192. font-weight: 400;
  193. color: var(--hj-white-1);
  194. }
  195. .btn {
  196. span {
  197. cursor: pointer;
  198. display: inline-block;
  199. //width: 18px;
  200. //height: 18px;
  201. text-align: center;
  202. line-height: 16px;
  203. border-radius: 0px 0px 0px 0px;
  204. //border: 1px solid #ffffff;
  205. color: var(--hj-white-1);
  206. //&:nth-of-type(2) {
  207. margin-left: 8px;
  208. //}
  209. }
  210. }
  211. }
  212. .project-list-cont {
  213. height: calc(100vh - $main-header-height - 310px);
  214. overflow-y: auto;
  215. .project-list-item {
  216. cursor: pointer;
  217. margin: 0 12px;
  218. margin-bottom: 12px;
  219. height: 36px;
  220. line-height: 36px;
  221. text-align: center;
  222. border-radius: 4px 4px 4px 4px;
  223. border: 1px solid #3b7cff;
  224. }
  225. .normal-item {
  226. background-color: transparent;
  227. color: $hj-white-3;
  228. font-weight: normal;
  229. font-size: var(--hj-fs-12);
  230. }
  231. .selected-item {
  232. background: rgba(59, 124, 255, 0.5);
  233. color: $hj-white-1;
  234. font-weight: bold;
  235. font-size: var(--hj-fs-14);
  236. }
  237. }
  238. }
  239. </style>