index.vue 6.6 KB

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