editor.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777
  1. <template>
  2. <div class="editor">
  3. <draggable
  4. v-model="comList"
  5. @add="onAdd"
  6. @update="onDragEnd"
  7. @end="onDragComplete"
  8. group="itxst"
  9. animation="300"
  10. :style="draggableStyle"
  11. handle=".drag-handle"
  12. :scroll="true"
  13. :scrollSensitivity="100"
  14. :scrollSpeed="20"
  15. >
  16. <transition-group style="display: block; min-height: 100vh">
  17. <template v-for="(it, index) in comList">
  18. <div
  19. :key="index"
  20. class="layers"
  21. :class="comIndex == index ? 'active-layer' : ''"
  22. >
  23. <div class="drag-handle" draggable>
  24. <img src="@/icons/svg/drag.svg" style="width: 20px;" icon-class="drag" />
  25. </div>
  26. <!-- :options="categoryList":props="props" -->
  27. <div style="padding: 10px 0">
  28. <el-form label-position="left" class="inline-form">
  29. <el-row :gutter="24" style="margin-left: 0; margin-right: 0">
  30. <!-- <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  31. <el-form-item label="模块分类:">
  32. <span @click="enableSelect(it)" style="cursor: pointer">{{
  33. getCategory(it.category_id)
  34. }}</span>
  35. </el-form-item>
  36. </el-col>
  37. <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
  38. <el-form-item label="模块名称:">
  39. <span @click="enableName(it)" style="cursor: pointer">{{
  40. it.dcb_name
  41. }}</span>
  42. </el-form-item>
  43. </el-col> -->
  44. <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  45. <el-form-item
  46. ><!-- v-if="$store.state.user.roleInfo.id == 1" -->
  47. <div class="btn-save">
  48. <el-tooltip
  49. v-if="type !== 'document'"
  50. class="item"
  51. effect="dark"
  52. content="保存模块"
  53. placement="top"
  54. >
  55. <el-button
  56. @click="onSaveTemplate(it)"
  57. icon="el-icon-document-add"
  58. circle
  59. >
  60. </el-button>
  61. </el-tooltip>
  62. <!-- <el-tooltip
  63. class="item"
  64. effect="dark"
  65. content="另存为"
  66. placement="top"
  67. >
  68. <el-button
  69. circle
  70. size="mini"
  71. @click="onSaveAs(it)"
  72. v-if="it.id > 0"
  73. icon="el-icon-document-copy"
  74. >
  75. </el-button>
  76. </el-tooltip> && type !== 'document'-->
  77. <el-button
  78. circle
  79. v-if="it.isEdit !== 1"
  80. @click="onEdit(index, 1)"
  81. icon="el-icon-edit"
  82. >
  83. <!-- <svg-icon icon-class="edit" /> -->
  84. </el-button>
  85. <el-button
  86. circle
  87. @click="onEdit(index, 2)"
  88. icon="el-icon-view"
  89. v-else
  90. >
  91. </el-button>
  92. <!-- v-if="!templateId && type !== 'document'" -->
  93. <el-tooltip
  94. class="item"
  95. effect="dark"
  96. content="删除"
  97. placement="top"
  98. >
  99. <el-button
  100. circle
  101. @click="onRemove(index)"
  102. icon="el-icon-delete"
  103. >
  104. <!-- <svg-icon icon-class="el-icon-delete"
  105. />--></el-button
  106. >
  107. </el-tooltip>
  108. </div>
  109. </el-form-item>
  110. </el-col>
  111. </el-row>
  112. </el-form>
  113. </div>
  114. <div class="main" @click="onSetActive(index)">
  115. <component
  116. :is="it.type"
  117. :ref="`component_${index}`"
  118. :com="it"
  119. :coms="comList"
  120. :currentIndex="index"
  121. :isAdmin="isAdmin"
  122. :insertCmd="insertCmd"
  123. @onUpdate="onUpdate"
  124. @onUpdateAttr="onUpdateAttr"
  125. @onUpdata="onUpdata"
  126. @onUpdateProdAttr="onUpdateProdAttr"
  127. @updateComContent="handleComContentUpdate"
  128. :isEdit="it.isEdit"
  129. />
  130. </div>
  131. <!-- <div class="label">
  132. {{ it.name }}
  133. <div class="del">
  134. <svg-icon
  135. @click="onEdit(index, 1)"
  136. v-if="it.isEdit !== 1"
  137. icon-class="edit"
  138. style="color: #fff; margin-right: 10px"
  139. />
  140. <svg-icon
  141. @click="onEdit(index, 2)"
  142. v-else
  143. icon-class="view"
  144. style="color: #fff; margin-right: 10px"
  145. />
  146. <svg-icon
  147. @click="onRemove(index)"
  148. icon-class="delete"
  149. style="color: #fff; margin-left: 10px"
  150. />
  151. </div>
  152. </div> -->
  153. </div>
  154. </template>
  155. <template v-if="comList.length <= 0">
  156. <div class="editor-empty" :key="-1">
  157. <el-empty description="请拖放组件至当前页面" />
  158. </div>
  159. </template>
  160. </transition-group>
  161. </draggable>
  162. </div>
  163. </template>
  164. <script>
  165. import draggable from "vuedraggable";
  166. import Table from "./components/Table";
  167. import TextArea from "./components/TextArea";
  168. import Empty from "./components/Empty";
  169. import {
  170. getAllList,
  171. createTemplate,
  172. updateTemplate,
  173. treeCategory,
  174. } from "@/api/template";
  175. export default {
  176. name: "editor",
  177. emits: [
  178. "onSetActiveIndex",
  179. "onDelete",
  180. "onInsert",
  181. "onLoadArticle",
  182. "onRebuild",
  183. "onSetComs",
  184. ],
  185. components: {
  186. Table,
  187. TextArea,
  188. draggable,
  189. Empty,
  190. },
  191. props: {
  192. coms: {
  193. type: Array,
  194. default: null,
  195. },
  196. comIndex: {
  197. type: Number,
  198. default: 0,
  199. },
  200. templateCate: {
  201. type: Array,
  202. default: () => {
  203. return [];
  204. },
  205. },
  206. insertCmd: {
  207. type: Object,
  208. default: null,
  209. },
  210. isAdmin: {
  211. type: Number,
  212. default: 2,
  213. },
  214. },
  215. watch: {
  216. coms: {
  217. async handler(val) {
  218. // 如果正在保存,则跳过处理
  219. if (this.isSaving || !val) return;
  220. try {
  221. // 处理拖拽数据,确保属性正确转换
  222. const processedComs = val.map((item) => {
  223. // 首先创建基础对象
  224. const processedItem = {
  225. ...item,
  226. // 确保 attrs 是数组
  227. dcb_attrs: Array.isArray(item.attrs)
  228. ? item.attrs
  229. : JSON.parse(item.attrs || "[]"),
  230. // 同步最新内容,优先使用当前显示的内容
  231. content: item.content || item.dcb_nr || "",
  232. dcb_nr: item.content || item.dcb_nr || "",
  233. // 确保 type 使用 dcb_type
  234. type: item.dcb_type || item.type,
  235. // 确保 name 使用 dcb_name
  236. name: item.dcb_name || item.name,
  237. };
  238. // 确保 content 和 dcb_nr 同步
  239. if (processedItem.content !== processedItem.dcb_nr) {
  240. processedItem.dcb_nr = processedItem.content;
  241. }
  242. return processedItem;
  243. });
  244. this.comList = processedComs;
  245. this.$emit("onSetComs:", this.comList);
  246. } catch (error) {
  247. console.error('处理组件数据时出错:', error);
  248. }
  249. },
  250. immediate: true,
  251. deep: true,
  252. },
  253. comIndex: {
  254. handler(val) {
  255. if (val <= 0) return;
  256. this.comList = this.comList.map((it) => {
  257. it.isEdit = 2;
  258. it.selDisabled = true;
  259. it.valDisabled = true;
  260. if (
  261. typeof it.category_id === "string" &&
  262. it.category_id.includes(" ")
  263. ) {
  264. it.category_id = it.category_id.split(" ");
  265. } else if (!Array.isArray(it.category_id)) {
  266. // 如果不是数组,将其转换为包含单个元素的数组
  267. it.category_id = [it.category_id].filter(Boolean);
  268. }
  269. return it;
  270. });
  271. },
  272. immediate: true, //立即执行
  273. deep: true,
  274. },
  275. },
  276. data() {
  277. return {
  278. showEditor: false,
  279. operation: "",
  280. id: 0,
  281. comList: [],
  282. categoryList: [],
  283. props: {
  284. value: "id",
  285. label: "name",
  286. children: "children",
  287. checkStrictly: true,
  288. },
  289. saveAs: false,
  290. draggableStyle: {
  291. width: "100%",
  292. overflowY: "auto",
  293. },
  294. type: "",
  295. isSaving: false, // 添加保存状态标志
  296. };
  297. },
  298. mounted() {
  299. console.log(this.$store.state);
  300. this.initCategoryList();
  301. this.type = this.$route.query.type;
  302. this.templateId = this.$route.query.templateId;
  303. this.$nextTick(() => {
  304. this.updateDirectoryNumbers(); // 初始化目录序号
  305. });
  306. },
  307. methods: {
  308. /* 拖拽 修改目录序号*/
  309. onDragComplete() {
  310. console.log("拖动结束");
  311. this.$nextTick(() => {
  312. this.updateDirectoryNumbers();
  313. this.$emit("onRebuild", this.comList);
  314. });
  315. },
  316. updateDirectoryNumbers() {
  317. let levelCounters = {};
  318. this.comList.forEach((module, moduleIndex) => {
  319. if (module.attrs) {
  320. module.attrs.forEach((attr) => {
  321. if (attr.type === "Directory") {
  322. const newNumber = this.generateNumberedContent(
  323. moduleIndex,
  324. attr.level,
  325. levelCounters
  326. );
  327. // 只更新 number 属性,完全不触及 content
  328. if (!attr.hasOwnProperty("number")) {
  329. this.$set(attr, "number", newNumber);
  330. } else {
  331. attr.number = newNumber;
  332. }
  333. }
  334. });
  335. }
  336. });
  337. },
  338. generateNumberedContent(moduleIndex, level, levelCounters) {
  339. return this.generateLevelPrefix(moduleIndex, level, levelCounters);
  340. },
  341. generateLevelPrefix(moduleIndex, level, levelCounters) {
  342. let prefix = [];
  343. for (let i = 1; i <= level; i++) {
  344. if (i === 1) {
  345. prefix.push(moduleIndex + 1);
  346. } else {
  347. if (!levelCounters[i]) {
  348. levelCounters[i] = 1;
  349. } else {
  350. levelCounters[i]++;
  351. }
  352. prefix.push(levelCounters[i]);
  353. }
  354. }
  355. return prefix.join(".");
  356. },
  357. carefulCopy(items) {
  358. return items.map((item) => {
  359. const newItem = { ...item };
  360. // 深拷贝 attrs 数组
  361. if (Array.isArray(newItem.attrs)) {
  362. newItem.attrs = newItem.attrs.map((attr) => ({ ...attr }));
  363. }
  364. // 深拷贝 content,如果它是一个对象或数组
  365. if (typeof newItem.content === "object" && newItem.content !== null) {
  366. newItem.content = JSON.parse(JSON.stringify(newItem.content));
  367. }
  368. // 处理特殊的 type,如 Table
  369. if (newItem.type === "Table") {
  370. newItem.tableHeader = [...newItem.tableHeader];
  371. newItem.tableData = newItem.tableData.map((row) => ({ ...row }));
  372. }
  373. // 保留其他属性的引用
  374. return newItem;
  375. });
  376. },
  377. handleComContentUpdate(index, updatedCom) {
  378. // 更新本地的 coms 数组
  379. this.$set(this.coms, index, updatedCom);
  380. // 触发父组件的更新
  381. this.$emit("onRebuild", this.coms);
  382. },
  383. showCategoryName(item) {
  384. return (
  385. this.type == "module" &&
  386. /* this.$store.state.user.roleInfo.id == 1 && */
  387. !item.valDisabled
  388. );
  389. },
  390. enableName(item) {
  391. item.valDisabled = false;
  392. this.$forceUpdate();
  393. },
  394. showCategorySelect(item) {
  395. return (
  396. this.type === "module" &&
  397. /* this.$store.state.user.roleInfo.id === 1 && */
  398. !item.selDisabled
  399. );
  400. },
  401. /* 选择分类 */
  402. enableSelect(item) {
  403. item.selDisabled = true;
  404. console.log(item);
  405. this.$forceUpdate();
  406. },
  407. /* 获取分类名称 */
  408. getCategory(item) {
  409. const findCategory = (list, id) => {
  410. for (const el of list) {
  411. if (el.id === id) {
  412. return el.name;
  413. }
  414. if (el.children) {
  415. const name = findCategory(el.children, id);
  416. if (name) {
  417. return name;
  418. }
  419. }
  420. }
  421. return null;
  422. };
  423. return findCategory(this.categoryList, item) || "请选择分类";
  424. /* return (
  425. this.categoryList.find((el) => el.id === item)?.name || "请选择分类"
  426. ); */
  427. },
  428. onSaveAs(e) {
  429. this.saveAs = true;
  430. this.onSaveTemplate(e);
  431. },
  432. /* 保存模块 */
  433. onSaveTemplate(e) {
  434. let _this = this;
  435. // 创建一个新对象来存储过滤后的数据
  436. let data = {};
  437. // 遍历原始对象,只保留 dcb_ 开头的属性
  438. Object.keys(e).forEach((key) => {
  439. if (key.startsWith("dcb_")) {
  440. data[key] = e[key];
  441. }
  442. });
  443. // 特殊字段映射
  444. data.dcb_nr = e.content;
  445. data.dcb_attrs = JSON.stringify(e.attrs);
  446. data.dcb_type = e.type;
  447. data.dcb_name = e.name; // 如果需要保存名称
  448. // 处理分类ID
  449. if (Array.isArray(e.category_id)) {
  450. data.category_id = e.category_id[e.category_id.length - 1];
  451. } else {
  452. data.category_id = e.category_id;
  453. }
  454. data.status = 5;
  455. // 根据是否存在 dcb_id 决定创建还是更新
  456. if (e.dcb_id == undefined || this.saveAs) {
  457. createTemplate(data).then((res) => {
  458. if (res.code != 200) return;
  459. e.id = res.data;
  460. _this.$alert("模块信息保存成功");
  461. _this.$emit("onRefresh");
  462. this.saveAs = false;
  463. e.selDisabled = false;
  464. e.valDisabled = false;
  465. this.$forceUpdate();
  466. });
  467. } else {
  468. updateTemplate(data).then((res) => {
  469. if (res.code != 200) return;
  470. _this.$alert("模块信息更新成功");
  471. _this.$emit("onRefresh");
  472. e.selDisabled = false;
  473. e.valDisabled = false;
  474. this.$forceUpdate();
  475. });
  476. }
  477. },
  478. /* 获取模块分类 */
  479. //获取模板分类信息
  480. async initCategoryList() {
  481. let _this = this;
  482. let res = await treeCategory(); //await getAllList();
  483. console.log(res);
  484. this.categoryList =
  485. res.data; /* //this.processDataForCascader(res.data); */
  486. },
  487. processDataForCascader(data) {
  488. console.log("Raw data:", data); // 调试原始数据
  489. const idMap = new Map();
  490. const rootItems = [];
  491. // First pass: create a map of all items
  492. data.forEach((item) => {
  493. const processedItem = { ...item, children: [] };
  494. idMap.set(item.id, processedItem);
  495. });
  496. // Second pass: build the tree structure
  497. data.forEach((item) => {
  498. if (item.parent_id === "0" || item.parent_id === 0) {
  499. rootItems.push(idMap.get(item.id));
  500. } else {
  501. const parent = idMap.get(parseInt(item.parent_id));
  502. if (parent) {
  503. parent.children.push(idMap.get(item.id));
  504. } else {
  505. console.warn(
  506. `Parent with id ${item.parent_id} not found for item:`,
  507. item
  508. );
  509. rootItems.push(idMap.get(item.id)); // 如果找不到父项,作为根项添加
  510. }
  511. }
  512. });
  513. console.log("Processed data:", rootItems); // 调试处理后的数据
  514. return rootItems;
  515. },
  516. onChangeCategory(item, value) {
  517. const selectedId = value[value.length - 1];
  518. item.category_id = selectedId;
  519. // You can now use the selected ID as needed
  520. },
  521. //更新产品属性
  522. onUpdateProdAttr(comIndex, attrIndex, data) {
  523. this.comList[comIndex].attrs[attrIndex].content = data;
  524. let attrName = this.comList[comIndex].attrs[attrIndex].attrs.name;
  525. let attrType = this.comList[comIndex].attrs[attrIndex].attrs.type;
  526. for (var i = 0; i < this.comList.length; i++) {
  527. for (var j = 0; j < this.comList[i].attrs.length; j++) {
  528. if (this.comList[i].attrs[j].type == "ProductAttr") {
  529. if (
  530. this.comList[i].attrs[j].attrs.name == attrName &&
  531. this.comList[i].attrs[j].attrs.type == attrType
  532. ) {
  533. this.comList[i].attrs[j].content = data;
  534. }
  535. }
  536. }
  537. }
  538. this.$emit("onRebuild", this.comList);
  539. },
  540. onUpdateAttr(comIndex, attrIndex, data) {
  541. console.log(comIndex, attrIndex, data);
  542. this.comList[comIndex].attrs[attrIndex].content = data;
  543. let dataType = this.comList[comIndex].attrs[attrIndex].type;
  544. let dataId = this.comList[comIndex].attrs[attrIndex].data;
  545. for (var i = 0; i < this.comList.length; i++) {
  546. for (var j = 0; j < this.comList[i].attrs.length; j++) {
  547. if (
  548. this.comList[i].attrs[j].type == dataType &&
  549. this.comList[i].attrs[j].id == dataId
  550. ) {
  551. this.comList[i].attrs[j].content = data;
  552. }
  553. }
  554. }
  555. this.$emit("onRebuild", this.comList);
  556. },
  557. /* 修改单个值 */
  558. onUpdata(comIndex, attrIndex, attrId, data, type) {
  559. let _this = this;
  560. let com = _this.coms[comIndex];
  561. if (type === "variableNull") {
  562. // 只更新特定的 variableNull 属性
  563. if (
  564. com &&
  565. com.attrs &&
  566. com.attrs[attrIndex] &&
  567. com.attrs[attrIndex].id === attrId
  568. ) {
  569. this.$set(com.attrs[attrIndex], "content", data);
  570. }
  571. } else {
  572. // 原有的逻辑,更新所有相同类型的属性
  573. let dataType = com.attrs[attrIndex].type;
  574. for (var i = 0; i < _this.coms.length; i++) {
  575. for (var j = 0; j < _this.coms[i].attrs.length; j++) {
  576. if (
  577. _this.coms[i].attrs[j].type == dataType &&
  578. _this.coms[i].attrs[j].id == attrId
  579. ) {
  580. _this.coms[i].attrs[j].content = data;
  581. }
  582. }
  583. }
  584. }
  585. _this.$emit("onRebuild", _this.coms);
  586. },
  587. onRemove(index) {
  588. this.$confirm("此操作将删除该模块, 是否继续?", "提示", {
  589. confirmButtonText: "确定",
  590. cancelButtonText: "取消",
  591. type: "warning",
  592. })
  593. .then(() => {
  594. this.$emit("onDelete", index);
  595. })
  596. .catch(() => {
  597. this.$message({
  598. type: "info",
  599. message: "已取消删除",
  600. });
  601. });
  602. },
  603. async onEdit(e, state) {
  604. try {
  605. // 如果是切换到预览模式,先等待保存完成
  606. if (state === 2) {
  607. console.log("isEditor:",'001');
  608. this.isSaving = true; // 设置保存状态
  609. const componentRef = this.$refs[`component_${e}`];
  610. if (componentRef && componentRef.save) {
  611. // 等待保存完成
  612. await componentRef.save();
  613. // 在保存完成后,手动更新组件状态
  614. this.$set(this.comList[e], 'isEdit', 2);
  615. // 立即触发更新
  616. await this.$nextTick();
  617. // 通知父组件更新
  618. this.$emit("onRebuild", this.comList);
  619. this.isSaving = false; // 重置保存状态
  620. return; // 直接返回,不执行后续的批量更新
  621. }
  622. }
  623. // 如果是切换到编辑模式,执行原有逻辑
  624. this.comList = this.comList.map((it, index) => {
  625. it.isEdit = 2;
  626. if (index === e && state === 1) {
  627. this.filterAttrs(it);
  628. }
  629. return it;
  630. });
  631. if (state === 1) {
  632. this.comList[e].isEdit = 1;
  633. this.onSetActive(e);
  634. }
  635. this.$emit("onRebuild", this.comList);
  636. } catch (error) {
  637. console.error('保存失败:', error);
  638. this.$message.error('切换模式失败,请重试');
  639. } finally {
  640. this.isSaving = false; // 确保在出错时也重置保存状态
  641. }
  642. },
  643. // 新增 filterAttrs 方法
  644. filterAttrs(item) {
  645. // 从 content 中提取所有 {{}} 包裹的 ID
  646. const contentIds = (item.dcb_nr.match(/{{([^}]+)}}/g) || []).map(
  647. (match) => match.slice(2, -2).trim()
  648. );
  649. // 过滤 attrs,只保留在 content 中出现的 ID
  650. item.attrs = item.attrs.filter((attr) => contentIds.includes(attr.id));
  651. },
  652. onAdd(e) {
  653. e.preventDefault();
  654. e.stopPropagation();
  655. this.$emit("onRebuild", this.comList);
  656. },
  657. onDragEnd(e) {
  658. e.preventDefault();
  659. e.stopPropagation();
  660. this.$emit("onRebuild", this.comList);
  661. },
  662. onUpdate(index, content) {
  663. let _this = this;
  664. this.coms[index].content = content;
  665. // 触发父组件的更新
  666. this.$emit("onRebuild", this.coms);
  667. },
  668. //激活当前层
  669. onSetActive(e) {
  670. this.$emit("onSetActiveIndex", e);
  671. },
  672. },
  673. };
  674. </script>
  675. <style lang="scss">
  676. @import "./editor.scss";
  677. .layers {
  678. margin-left: 26px;
  679. .drag-handle {
  680. position: absolute;
  681. top: 0;
  682. left: -27px;
  683. cursor: move;
  684. padding: 0 5px;
  685. display: flex;
  686. align-items: center;
  687. /* background-color: #f0f0f0; */
  688. &:hover {
  689. /* background-color: #e0e0e0; */
  690. }
  691. }
  692. .content-wrapper {
  693. flex-grow: 1;
  694. display: flex;
  695. flex-direction: column;
  696. }
  697. .main {
  698. flex-grow: 1;
  699. }
  700. }
  701. .inline-form {
  702. display: block;
  703. width: 100%;
  704. /* flex-wrap: wrap;
  705. gap: 10px; */
  706. }
  707. .inline-form .el-form-item {
  708. display: flex;
  709. align-items: center;
  710. margin-bottom: 0;
  711. flex: 1;
  712. min-width: 300px;
  713. }
  714. .inline-form .el-form-item__label {
  715. flex-shrink: 0;
  716. width: auto;
  717. padding-right: 12px;
  718. }
  719. .inline-form .el-form-item__content {
  720. flex-grow: 1;
  721. margin-left: 0 !important;
  722. }
  723. .input-item {
  724. width: 200px;
  725. }
  726. </style>