index.vue 8.2 KB

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