index.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  1. <template>
  2. <div class="editor-attribute" v-if="com != null">
  3. <el-form>
  4. <template v-for="(sub, subIndex) in filteredAttrs">
  5. <template v-if="com.type == 'TextArea'">
  6. <template v-if="isTextAreaType(sub.type)">
  7. <el-form-item :label="sub.id + ':'"
  8. ><!-- + ' (引用名:[' + sub.id + '])' -->
  9. <!-- <el-input
  10. type="textarea"
  11. @input="updateAllReferences(sub, $event)"
  12. v-model="sub.content"
  13. ></el-input> -->
  14. <span @click="toggleBackground(sub.id)" style="cursor: pointer">{{
  15. sub.content
  16. }}</span>
  17. </el-form-item>
  18. </template>
  19. <template v-if="sub.type == 'formual'">
  20. <el-form-item :label="sub.id + ':'"
  21. ><!-- + ' (引用名:[' + sub.id + '])' -->
  22. <!-- <el-input type="textarea" v-model="sub.formula"></el-input> -->
  23. <span @click="toggleBackground(sub.id)" style="cursor: pointer">{{
  24. sub.formula
  25. }}</span>
  26. </el-form-item>
  27. </template>
  28. <template v-if="sub.type == 'sourceData'">
  29. <el-form-item :label="sub.id + ':'"
  30. ><!-- + ' (引用名:[' + sub.id + '])' -->
  31. {{ formatSourceData(sub.id, sub.formula) }}
  32. </el-form-item>
  33. </template>
  34. </template>
  35. </template>
  36. </el-form>
  37. <el-dialog
  38. :visible.sync="dialogVisible"
  39. append-to-body
  40. v-el-drag-dialog
  41. width="300"
  42. custom-class="prod-verify"
  43. title="编辑表头"
  44. >
  45. <headerSetting
  46. :headerItemName="headerItemName"
  47. @onSetHeader="onSetHeader"
  48. ></headerSetting>
  49. </el-dialog>
  50. </div>
  51. </template>
  52. <script>
  53. import headerSetting from "../headerSetting";
  54. import elDragDialog from "@/directive/el-drag-dialog";
  55. import { getAllCategory, createTemplate, updateTemplate } from "@/api/template";
  56. import { searchSourceDataCategory } from "@/api/sourceData";
  57. import { searchDocumentCategory } from "@/api/document";
  58. import { searchTemplateCategory, searchTemplate } from "@/api/template";
  59. export default {
  60. name: "attributes",
  61. components: { headerSetting },
  62. directives: { elDragDialog },
  63. emits: ["onRefresh"],
  64. props: {
  65. com: {
  66. type: Object,
  67. default: () => null,
  68. },
  69. },
  70. watch: {
  71. com: {
  72. handler(newVal) {
  73. if (newVal && newVal.content) {
  74. this.processContent();
  75. }
  76. },
  77. deep: true,
  78. },
  79. },
  80. data() {
  81. return {
  82. dialogVisible: false,
  83. activeNames: "0",
  84. categoryList: [],
  85. articleCategoryList: [],
  86. activeHeaderIndex: -1,
  87. headerItemName: "",
  88. props: {
  89. value: "id",
  90. label: "name",
  91. children: "children",
  92. },
  93. processedAttrs: [],
  94. };
  95. },
  96. computed: {
  97. filteredAttrs() {
  98. console.log("processedAttrs", this.processedAttrs);
  99. return this.processedAttrs;
  100. },
  101. },
  102. mounted() {
  103. this.initCategoryList();
  104. if (this.com && this.com.content) {
  105. this.processContent();
  106. }
  107. },
  108. methods: {
  109. toggleBackground(id) {
  110. const element = document.getElementById(id);
  111. if (element) {
  112. if (element.style.backgroundColor === "yellow") {
  113. element.style.backgroundColor = "";
  114. } else {
  115. element.style.backgroundColor = "yellow";
  116. }
  117. }
  118. },
  119. updateAllReferences(val, newValue) {
  120. this.com.attrs.map((el) => {
  121. if (el.name == val.name) {
  122. el.content = newValue;
  123. }
  124. });
  125. /* this.processedAttrs.forEach((attr) => {
  126. if (attr.id === id) {
  127. attr.content = newValue;
  128. }
  129. });
  130. // Update the original com.attrs as well
  131. if (this.com && this.com.attrs) {
  132. this.com.attrs.forEach((attr) => {
  133. if (attr.id === id) {
  134. attr.content = newValue;
  135. }
  136. });
  137. }
  138. // Update the content of the component
  139. if (this.com && this.com.content) {
  140. const regex = new RegExp(`\\{\\{${id}\\}\\}`, "g");
  141. this.com.content = this.com.content.replace(regex, `{{${newValue}}}`);
  142. } */
  143. },
  144. isTextAreaType(type) {
  145. return ![
  146. "pager",
  147. "constant",
  148. "attr",
  149. "formual",
  150. "sourceData",
  151. "Directory",
  152. ].includes(type);
  153. },
  154. extractTemplates(content) {
  155. const templateRegex = /\{\{(.*?)\}\}/g;
  156. let match;
  157. const templates = [];
  158. while ((match = templateRegex.exec(content)) !== null) {
  159. templates.push(match[1].trim());
  160. }
  161. return templates;
  162. },
  163. processContent() {
  164. if (this.com && this.com.content) {
  165. const templates = this.extractTemplates(this.com.content);
  166. if (this.com.attrs && Array.isArray(this.com.attrs)) {
  167. this.processedAttrs = this.com.attrs.filter(
  168. (el) => templates.includes(el.id) || el.type === "formual"
  169. );
  170. }
  171. } else {
  172. this.processedAttrs = [];
  173. }
  174. },
  175. formatSourceData(id, e) {
  176. const pattern = /\[(.*?)\]\[(.*?)\]\[(.*?)\]\[(.*?)\]/;
  177. const items = e.match(pattern);
  178. const dataIndex = items[4].split(",");
  179. return `${id}=${items[2]}.${items[3]}.${String.fromCharCode(
  180. 65 + parseInt(dataIndex[1])
  181. )}${parseInt(dataIndex[0]) + 1}`;
  182. },
  183. async onSaveTemplate(e) {
  184. const data = { ...e, attrs: JSON.stringify(e.attrs), status: 5 };
  185. delete data.category;
  186. if (data.id === undefined || this.saveAs) {
  187. const res = await createTemplate(data);
  188. if (res.status === 200) {
  189. data.id = res.data;
  190. this.com.id = res.data;
  191. this.$alert("模板信息保存成功");
  192. this.$emit("onRefresh");
  193. this.saveAs = false;
  194. }
  195. } else {
  196. const res = await updateTemplate(data);
  197. if (res.status === 200) {
  198. this.$alert("模板信息更新成功");
  199. this.$emit("onRefresh");
  200. }
  201. }
  202. },
  203. async initCategoryList() {
  204. const res = await searchTemplateCategory({
  205. page: 1,
  206. pageSize: 99,
  207. status: 5,
  208. });
  209. if (res.status === 200) {
  210. this.categoryList = res.data.dataList || [];
  211. for (const category of this.categoryList) {
  212. category.dataList = await this.getTemplateList(category.id);
  213. }
  214. }
  215. },
  216. async getTemplateList(categoryId) {
  217. const res = await searchTemplate({
  218. page: 1,
  219. pageSize: 999,
  220. category_id: categoryId,
  221. status: 5,
  222. });
  223. if (res.status === 200) {
  224. return res.data.dataList.map((item) => ({
  225. ...item,
  226. attrs: JSON.parse(item.attrs),
  227. }));
  228. }
  229. return [];
  230. },
  231. onModify(index, subIndex, headerIndex) {
  232. this.currentIndex = index;
  233. this.componentIndex = subIndex;
  234. this.activeHeaderIndex = headerIndex;
  235. this.headerItemName =
  236. this.components[index].components[subIndex].attrs.tableHeader[
  237. headerIndex
  238. ];
  239. this.dialogVisible = true;
  240. },
  241. onSetHeader(name) {
  242. if (this.currentIndex >= 0) {
  243. const header =
  244. this.components[this.currentIndex].components[this.componentIndex]
  245. .attrs.tableHeader;
  246. if (this.activeHeaderIndex >= 0) {
  247. header[this.activeHeaderIndex] = name;
  248. } else {
  249. header.push(name);
  250. }
  251. }
  252. this.$emit("onSetComponents", [...this.components]);
  253. this.dialogVisible = false;
  254. },
  255. onInsert(index, subIndex) {
  256. this.currentIndex = index;
  257. this.componentIndex = subIndex;
  258. this.headerItemName = "";
  259. this.dialogVisible = true;
  260. },
  261. onDeleteHeaderItem(index, subIndex, headerIndex) {
  262. this.components[index].components[subIndex].attrs.tableHeader.splice(
  263. headerIndex,
  264. 1
  265. );
  266. this.$emit("onSetComponents", [...this.components]);
  267. },
  268. onSetActiveIndex(e) {
  269. this.activeHeaderIndex = e === this.activeHeaderIndex ? -1 : e;
  270. },
  271. },
  272. };
  273. </script>
  274. <style lang="scss">
  275. @import "./index.scss";
  276. </style>