8
0

index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. <template>
  2. <hc-drawer
  3. v-model="isShow"
  4. to-id="hc-main-box"
  5. is-close
  6. @close="drawerClose"
  7. >
  8. <hc-body split :options="{ sizes: [14, 96] }">
  9. <template #left>
  10. <hc-card scrollbar>
  11. <h3 class="mb-2">引用元素表</h3>
  12. <ElTree
  13. :load="treeLoadNode"
  14. :props="treeProps"
  15. accordion
  16. highlight-current
  17. lazy
  18. @node-click="treeNodeTap"
  19. v-if="isShowTree"
  20. />
  21. </hc-card>
  22. </template>
  23. <hc-card>
  24. <template #header>
  25. <div class="w-400px">
  26. <hc-search-input
  27. v-model="searchForm.titleName"
  28. @search="searchClick"
  29. />
  30. </div>
  31. </template>
  32. <template #extra>
  33. <el-button hc-btn type="primary" @click="quteEleTableClick"
  34. >引用元素表单库</el-button
  35. >
  36. <el-button
  37. hc-btn
  38. type="danger"
  39. @click="batchDel"
  40. :loading="batchDelLoad"
  41. >删除元素表</el-button
  42. >
  43. </template>
  44. <hc-table
  45. :column="tableColumn"
  46. :datas="tableData"
  47. :loading="tableLoading"
  48. :index-style="{ width: 60 }"
  49. is-check
  50. :check-style="{ width: 29 }"
  51. @selection-change="tableCheckChange"
  52. >
  53. <template #action="{ row }">
  54. <el-link type="primary" @click="linkExcelClick(row)"
  55. >关联清表</el-link
  56. >
  57. <el-link
  58. v-loading="editElementLoading"
  59. type="primary"
  60. @click="editElement(row)"
  61. :disabled="row.excelIds == -1"
  62. >编辑元素</el-link
  63. >
  64. <el-link
  65. v-loading="adjustExcelLoading"
  66. type="primary"
  67. @click="adjustExcelClick(row)"
  68. :disabled="row.excelIds == -1"
  69. >调整表单</el-link
  70. >
  71. <el-link type="primary" @click="rowFormulaClick(row)"
  72. >编辑公式</el-link
  73. >
  74. <el-link type="primary" @click="assignWbs(row)"
  75. >分配WBS</el-link
  76. >
  77. </template>
  78. </hc-table>
  79. <template #action>
  80. <hc-pages :pages="searchForm" @change="pageChange" />
  81. </template>
  82. </hc-card>
  83. </hc-body>
  84. <!-- 引用元素表 -->
  85. <quteElePage
  86. v-model="quteEleShow"
  87. :projectId="projectId"
  88. @close="quteEleClose"
  89. ></quteElePage>
  90. <!-- 关联清表 -->
  91. <HcAssociationList
  92. v-model="isAssociationShow"
  93. :info="associationInfo"
  94. :type="2"
  95. />
  96. <!-- 编辑元素 -->
  97. <HcEditElement
  98. v-model="isEditElementShow"
  99. :info="editElementInfo"
  100. :data="editElementData"
  101. :type="2"
  102. @to-page="editElementToPage"
  103. />
  104. <!-- 调整表单 -->
  105. <HcAdjustExcel
  106. v-model="isAdjustExcelShow"
  107. :info="adjustExcelInfo"
  108. :type="2"
  109. />
  110. <!-- 分配WBS -->
  111. <allocateWbs
  112. v-model="isAllocateShow"
  113. :wbsType="wbsType"
  114. :projectId="projectId"
  115. :data="allocateWbsInfo"
  116. ></allocateWbs>
  117. </hc-drawer>
  118. </template>
  119. <script setup>
  120. import { ref, watch, nextTick } from "vue";
  121. import { HcDelMsg } from "hc-vue3-ui";
  122. import { getArrValue, arrToId, isNullES, deepClone } from "js-fast-way";
  123. import privateApi from "~api/wbs/private";
  124. import excelApi from "~api/exctab/exceltab";
  125. import quteElePage from "./quteElePage.vue";
  126. import HcAssociationList from "../association-list.vue";
  127. import HcEditElement from "../edit-element.vue";
  128. import HcAdjustExcel from "../adjust-excel.vue";
  129. import allocateWbs from "./allocateWbs.vue";
  130. //事件
  131. const emit = defineEmits(["close"]);
  132. //双向绑定
  133. const isShow = defineModel("modelValue", {
  134. default: false,
  135. });
  136. //监听显示
  137. watch(isShow, (val) => {
  138. if (val) getDataApi();
  139. });
  140. const props = defineProps({
  141. projectId: {
  142. type: String,
  143. default: "",
  144. },
  145. wbsType: {
  146. type: [String, Number],
  147. default: "",
  148. },
  149. wbsId: {
  150. type: [String, Number],
  151. default: "",
  152. },
  153. });
  154. const projectId = ref(props.projectId);
  155. const wbsId = ref(props.wbsId);
  156. const wbsType = ref(props.wbsType);
  157. //监听数据
  158. watch(
  159. () => [props.projectId, props.wbsId, props.wbsType],
  160. ([pid, wid, wtype]) => {
  161. projectId.value = pid;
  162. wbsId.value = wid;
  163. wbsType.value = wtype;
  164. },
  165. { deep: true }
  166. );
  167. //处理相关数据
  168. const getDataApi = () => {};
  169. //获取数据
  170. const tabTypeLazyTree = async (parentId = "12345678910") => {
  171. //发起请求
  172. const { data } = await privateApi.tabTypeLazyTree({
  173. parentId,
  174. current: 1,
  175. size: 1000,
  176. projectId: projectId.value,
  177. });
  178. const records = getArrValue(data?.records);
  179. records.forEach((item) => {
  180. item.isLeaf = !item.hasChildren;
  181. });
  182. return { data: records, total: data?.total };
  183. };
  184. const isShowTree = ref(true);
  185. const refreshTree = () => {
  186. isShowTree.value = false;
  187. setTimeout(() => {
  188. isShowTree.value = true;
  189. }, 1000);
  190. };
  191. const treeLoadNode = async (node, resolve) => {
  192. if (node.level === 0) {
  193. const resData = await tabTypeLazyTree();
  194. resolve(resData?.data);
  195. } else {
  196. const resData = await tabTypeLazyTree(
  197. node?.data?.primaryKeyId,
  198. "",
  199. false,
  200. {
  201. current: 1,
  202. size: 2000,
  203. projectId: projectId.value,
  204. }
  205. );
  206. resolve(resData?.data);
  207. }
  208. };
  209. //树节点被点击
  210. const nodeInfo = ref({});
  211. const treeProps = {
  212. label: "title",
  213. isLeaf: (item) => {
  214. return !item.hasChildren;
  215. },
  216. };
  217. const treeNodeTap = (data, node) => {
  218. nodeInfo.value = data;
  219. searchForm.value.parentId = data.id;
  220. if (node?.level === 1) {
  221. searchClick();
  222. } else if (node?.level === 2) {
  223. searchForm.value.total = 1;
  224. tableData.value = [data];
  225. }
  226. };
  227. //搜索表单
  228. const searchForm = ref({ current: 1, size: 30, total: 0 });
  229. //搜索
  230. const searchClick = () => {
  231. const { parentId } = searchForm.value;
  232. if (isNullES(parentId)) {
  233. window?.$message?.warning("请先在左侧点击一个节点");
  234. return;
  235. }
  236. searchForm.value.current = 1;
  237. getTableData();
  238. };
  239. //分页
  240. const pageChange = ({ current, size }) => {
  241. const { parentId } = searchForm.value;
  242. if (isNullES(parentId)) {
  243. window?.$message?.warning("请先在左侧点击一个节点");
  244. return;
  245. }
  246. searchForm.value.current = current;
  247. searchForm.value.size = size;
  248. getTableData();
  249. };
  250. //表格数据
  251. const tableData = ref([]);
  252. const tableColumn = ref([
  253. { key: "title", name: "名称" },
  254. { key: "elementTotal", name: "总量", width: 80, align: "center" },
  255. { key: "tabOwner", name: "所属方", width: 140, align: "center" },
  256. { key: "fillRate", name: "填报率", width: 80, align: "center" },
  257. { key: "action", name: "操作", width: 220, align: "center" },
  258. ]);
  259. //获取表格数据
  260. const tableLoading = ref(false);
  261. const getTableData = async () => {
  262. tableData.value = [];
  263. tableLoading.value = true;
  264. const { data } = await privateApi.tabTypeLazyTree({
  265. ...searchForm.value,
  266. total: null,
  267. projectId: projectId.value,
  268. });
  269. tableLoading.value = false;
  270. tableData.value = getArrValue(data?.records);
  271. searchForm.value.total = data?.total || 0;
  272. };
  273. //表格被选择
  274. const tableCheckKeys = ref([]);
  275. const tableCheckChange = (rows) => {
  276. tableCheckKeys.value = rows;
  277. };
  278. //关联清表
  279. const isAssociationShow = ref(false);
  280. const associationInfo = ref({});
  281. const linkExcelClick = async (item) => {
  282. associationInfo.value = item;
  283. await nextTick();
  284. isAssociationShow.value = true;
  285. };
  286. //公式配置
  287. const rowFormulaClick = (row) => {};
  288. //分配WBS
  289. const isAllocateShow = ref(false);
  290. const allocateWbsInfo = ref({});
  291. const assignWbs = (row) => {
  292. allocateWbsInfo.value = row;
  293. isAllocateShow.value = true;
  294. };
  295. //编辑元素
  296. const isEditElementShow = ref(false);
  297. const editElementInfo = ref({});
  298. const editElementData = ref({});
  299. const editElementLoading = ref(false);
  300. const editElement = async (row) => {
  301. editElementLoading.value = true;
  302. const { code, data } = await excelApi.getExcelHtml({ pkeyId: row.id });
  303. if (code !== 200 || isNullES(data)) {
  304. editElementLoading.value = false;
  305. window?.$message.warning("表单异常,请联系管理员");
  306. return;
  307. }
  308. editElementLoading.value = false;
  309. editElementInfo.value = row;
  310. editElementData.value = {
  311. pid: projectId.value,
  312. wbsid: wbsId.value,
  313. };
  314. await nextTick();
  315. isEditElementShow.value = true;
  316. };
  317. //编辑元素里的跳转页面
  318. const editElementToPage = async (name) => {
  319. const row = deepClone(editElementInfo.value);
  320. //表单调整
  321. if (name === "adjustment") {
  322. adjustExcelInfo.value = deepClone(row);
  323. await nextTick();
  324. isAdjustExcelShow.value = true;
  325. }
  326. //公式配置
  327. if (name === "formula") {
  328. console.log("还没做");
  329. }
  330. };
  331. //调整表单
  332. const isAdjustExcelShow = ref(false);
  333. const adjustExcelLoading = ref(false);
  334. const adjustExcelInfo = ref({});
  335. const adjustExcelClick = async (row) => {
  336. const { primaryKeyId, excelIds } = row;
  337. if (isNullES(primaryKeyId) || isNullES(excelIds)) {
  338. window?.$message.warning("表单值异常,请联系管理员");
  339. return;
  340. }
  341. adjustExcelLoading.value = true;
  342. const { code, data } = await excelApi.getExcelHtml({
  343. pkeyId: primaryKeyId,
  344. });
  345. if (code !== 200 || isNullES(data)) {
  346. adjustExcelLoading.value = false;
  347. window?.$message.warning("表单异常,请联系管理员");
  348. return;
  349. }
  350. adjustExcelInfo.value = deepClone(row);
  351. adjustExcelLoading.value = false;
  352. isAdjustExcelShow.value = true;
  353. };
  354. //关闭抽屉
  355. const drawerClose = () => {
  356. isShow.value = false;
  357. emit("close");
  358. };
  359. //删除元素表
  360. const batchDelLoad = ref(false);
  361. const batchDel = async () => {
  362. if (tableCheckKeys.value.length == 0) {
  363. window?.$message?.warning("请先选择一个元素");
  364. return;
  365. }
  366. HcDelMsg(async (resolve) => {
  367. //发起请求
  368. const ids = arrToId(tableCheckKeys.value);
  369. const { isRes } = await privateApi.delAprojectTab({
  370. projectId: projectId.value,
  371. primaryKeyIds: ids,
  372. });
  373. resolve(); //关闭弹窗
  374. if (!isRes) return;
  375. window.$message.success("删除成功");
  376. getTableData().then();
  377. });
  378. };
  379. //引用元素表单库
  380. const quteEleShow = ref(false);
  381. const quteEleTableClick = () => {
  382. quteEleShow.value = true;
  383. };
  384. const quteEleClose = () => {
  385. quteEleShow.value = false;
  386. getTableData().then();
  387. refreshTree();
  388. };
  389. </script>