index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895
  1. <template>
  2. <div class="mainContentBox">
  3. <div class="body">
  4. <div v-if="!excelStatus">
  5. <avue-crud
  6. ref="crudRef"
  7. v-model:search="search"
  8. v-model="form"
  9. :data="data"
  10. :option="option"
  11. v-model:page="page"
  12. @row-save="createRow"
  13. @row-update="updateRow"
  14. @row-del="deleteRow"
  15. @search-change="searchChange"
  16. @search-reset="resetChange"
  17. @size-change="dataList"
  18. @current-change="dataList"
  19. @selection-change="selectionChange"
  20. @row-dblclick="(row) => lookTep(row)"
  21. >
  22. <template #menu-left="{}">
  23. <el-button
  24. @click="addTemplate"
  25. class="ml-3"
  26. type="primary"
  27. icon="el-icon-plus"
  28. >
  29. 新 增
  30. </el-button>
  31. <el-button
  32. :disabled="toDeleteIds.length < 1"
  33. type="danger"
  34. icon="el-icon-delete"
  35. :size="size"
  36. @click="multipleDelete"
  37. >删除</el-button
  38. >
  39. </template>
  40. <!-- <template #menu="{ row, index, type }"> -->
  41. <!-- <el-button @click="lookTep(row)" text type="primary"
  42. >查看</el-button
  43. > -->
  44. <!-- <el-button @click="editTep(row)" text type="primary"
  45. >编辑</el-button
  46. > -->
  47. <!-- <el-popconfirm
  48. :visible="row.dialogVisible"
  49. title="您确认删除吗?"
  50. width="200"
  51. @cancel="row.dialogVisible = false"
  52. @confirm="deleteTep(row)"
  53. >
  54. <template #reference>
  55. <el-button @click="row.dialogVisible = true" text type="primary"
  56. >删除</el-button
  57. >
  58. </template>
  59. </el-popconfirm> -->
  60. <!-- </template> -->
  61. </avue-crud>
  62. </div>
  63. <div v-if="excelStatus" :key="excelKey" class="editView">
  64. <div class="exView" @mouseup="showPosition">
  65. <ExcelView
  66. ref="excelViewRef"
  67. :option="options"
  68. @confirm="confirm"
  69. v-model:data="exceldata"
  70. />
  71. </div>
  72. <div class="form" v-if="options.edit">
  73. <el-scrollbar>
  74. <el-form
  75. ref="formRef"
  76. :model="formVlaue"
  77. :rules="rules"
  78. label-width="auto"
  79. :show-message="false"
  80. status-icon
  81. >
  82. <el-form-item label="模版名称" prop="formName">
  83. <el-input v-model="formVlaue.formName" />
  84. </el-form-item>
  85. <el-form-item label="物料列表" prop="materialList">
  86. <el-select
  87. v-model="materialValue"
  88. multiple
  89. @remove-tag="setFormMaterial"
  90. ref="selectBom"
  91. placeholder="请选择物料"
  92. @click="startCreat"
  93. >
  94. <el-option
  95. v-for="item in formVlaue.materialList"
  96. :key="item"
  97. :label="item.materialName"
  98. :value="item.materialCode"
  99. />
  100. </el-select>
  101. </el-form-item>
  102. <el-form-item label="启用状态" prop="state">
  103. <el-select v-model="formVlaue.state" placeholder="请选择状态">
  104. <el-option
  105. v-for="(item, index) in dicts.excel_states"
  106. :key="index"
  107. :label="item.dictLabel"
  108. :value="item.dictValue"
  109. />
  110. </el-select>
  111. </el-form-item>
  112. <el-form-item>
  113. <div class="btns">
  114. <el-button
  115. v-if="!operaEditStatus"
  116. type="primary"
  117. @click="submitForm(formRef)"
  118. >
  119. 创 建
  120. </el-button>
  121. <el-button
  122. v-if="operaEditStatus"
  123. type="primary"
  124. @click="updateExForm(formRef)"
  125. >
  126. 更 新
  127. </el-button>
  128. <el-button v-if="!operaEditStatus" @click="resetForm(formRef)"
  129. >重 置</el-button
  130. >
  131. <el-button type="primary" @click="resetData">
  132. 取 消
  133. </el-button>
  134. </div>
  135. </el-form-item>
  136. </el-form>
  137. <!-- <div class="add">
  138. <div class="body">
  139. <el-form
  140. ref="formRef1"
  141. :model="addForm"
  142. :rules="addRules"
  143. label-width="auto"
  144. status-icon
  145. :show-message="false"
  146. style="width: 410px"
  147. >
  148. <el-form-item label="数据名称" prop="paramName">
  149. <el-select
  150. v-model="addForm.paramName"
  151. allow-create
  152. filterable
  153. default-first-option
  154. :reserve-keyword="false"
  155. >
  156. <el-option
  157. v-for="item in dicts.form_params"
  158. :key="item.dictLabel"
  159. :label="item.dictLabel"
  160. :value="item.dictValue"
  161. />
  162. </el-select>
  163. </el-form-item>
  164. <el-form-item label="同步坐标" prop="position">
  165. <el-input :disabled="true" v-model="addForm.position" />
  166. </el-form-item>
  167. <el-form-item label="上限值" prop="up">
  168. <el-input v-model="addForm.up" />
  169. </el-form-item>
  170. <el-form-item label="下限值" prop="down">
  171. <el-input v-model="addForm.down" />
  172. </el-form-item>
  173. <el-form-item label="标准值" prop="standard">
  174. <el-input v-model="addForm.standard" />
  175. </el-form-item>
  176. <el-form-item label="数据来源" prop="source">
  177. <el-select v-model="addForm.source">
  178. <el-option label="手动" value="手动" selected />
  179. <el-option label="自动" value="自动" />
  180. </el-select>
  181. </el-form-item>
  182. <el-form-item>
  183. <div class="btns">
  184. <el-button
  185. :disabled="!operaEditStatus"
  186. type="primary"
  187. @click="creatAddForm()"
  188. >
  189. 新增
  190. </el-button>
  191. </div>
  192. </el-form-item>
  193. </el-form>
  194. </div>
  195. </div>
  196. <div class="table">
  197. <el-table
  198. id="table"
  199. border
  200. :data="settings"
  201. style="width: 430px; max-height: 240px"
  202. >
  203. <el-table-column prop="paramName" label="名称" />
  204. <el-table-column prop="position" label="坐标" />
  205. <el-table-column prop="checkStr" width="60" label="上限值">
  206. <template #default="{ row }">
  207. <span>{{ row.up ? row.up : "-" }}</span>
  208. </template>
  209. </el-table-column>
  210. <el-table-column prop="checkStr" width="60" label="下限值">
  211. <template #default="{ row }">
  212. <span>{{ row.down ? row.down : "-" }}</span>
  213. </template>
  214. </el-table-column>
  215. <el-table-column prop="checkStr" width="60" label="标准值">
  216. <template #default="{ row }">
  217. <span>{{ row.standard ? row.standard : "-" }}</span>
  218. </template>
  219. </el-table-column>
  220. <el-table-column prop="checkStr" width="60" label="数据来源">
  221. <template #default="{ row }">
  222. <span>{{
  223. row.checkStr ? JSON.parse(row.checkStr).source : "-"
  224. }}</span>
  225. </template>
  226. </el-table-column>
  227. <el-table-column label="操作" width="60">
  228. <template #default="{ row }">
  229. <el-button
  230. link
  231. type="primary"
  232. size="small"
  233. @click="deleteSettings(row.id)"
  234. >删除</el-button
  235. >
  236. </template>
  237. </el-table-column>
  238. </el-table>
  239. </div>
  240. <div class="btns">
  241. <el-button
  242. :disabled="searchForm.pageNo == 1"
  243. link
  244. type="primary"
  245. @click="deletePage"
  246. >
  247. 上一页
  248. </el-button>
  249. <el-button
  250. :disabled="
  251. searchForm.totalPages == searchForm.pageNo ||
  252. searchForm.totalPages == 0
  253. "
  254. link
  255. type="primary"
  256. @click="addPage"
  257. >
  258. 下一页
  259. </el-button>
  260. </div> -->
  261. </el-scrollbar>
  262. </div>
  263. <div class="form" style="display: flex; justify-content: center" v-else>
  264. <el-button type="primary" @click="resetData"> 返 回 </el-button>
  265. <!-- <div class="table">
  266. <el-table
  267. border
  268. :data="settings"
  269. style="width: 450px; max-height: 240px"
  270. >
  271. <el-table-column prop="paramName" label="数据名称" />
  272. <el-table-column prop="position" label="同步坐标" />
  273. </el-table>
  274. <div class="btns">
  275. <el-button
  276. :disabled="searchForm.pageNo == 1"
  277. link
  278. type="primary"
  279. @click="deletePage"
  280. >
  281. 上一页
  282. </el-button>
  283. <el-button
  284. :disabled="
  285. searchForm.totalPages == searchForm.pageNo ||
  286. searchForm.totalPages == 0
  287. "
  288. link
  289. type="primary"
  290. @click="addPage"
  291. >
  292. 下一页
  293. </el-button>
  294. </div>
  295. </div> -->
  296. </div>
  297. </div>
  298. <CommonTable
  299. ref="ctableRef"
  300. :key="ctableRefKey"
  301. tableTitle="物料添加"
  302. :multipleRow="multipleRow"
  303. tableType="MARTERIAL"
  304. @selected-sure="onSelectedFinish"
  305. />
  306. </div>
  307. </div>
  308. </template>
  309. <script setup>
  310. import { ref } from "vue";
  311. import { useCrud } from "@/hooks/userCrud";
  312. import {
  313. addExcel,
  314. delExcel,
  315. updateExcel,
  316. getSettingsData,
  317. addSettingsData,
  318. deleteSettingsData,
  319. } from "@/api/excel";
  320. import ExcelView from "@/components/ExcelView/index.vue";
  321. import { useDictionaryStore } from "@/store";
  322. const { dicts } = useDictionaryStore();
  323. const selectKey = ref(false);
  324. // const tableData = ref([]);
  325. const showPosition = () => {
  326. if (!excelStatus) return;
  327. addForm.value.position = excelViewRef.value.getRangeAxis()[0];
  328. };
  329. const multipleRow = ref(true);
  330. const ctableRef = ref(null);
  331. const ctableRefKey = ref(false);
  332. const selectBom = ref({});
  333. const startCreat = () => {
  334. selectBom.value.blur();
  335. ctableRef.value?.mergeOption({
  336. selection: true,
  337. reserveSelection: true,
  338. });
  339. ctableRef.value.startSelect();
  340. };
  341. const onSelectedFinish = (selectedValueList) => {
  342. formVlaue.value.materialList = [];
  343. selectedValueList.forEach((item, index) => {
  344. formVlaue.value.materialList.push({
  345. materialCode: item.materialCode,
  346. materialName: item.materialName,
  347. spec: item.spec,
  348. });
  349. });
  350. ctableRefKey.value = !ctableRefKey.value;
  351. selectKey.value = !selectKey.value;
  352. };
  353. const materialValue = ref([]);
  354. const setMaterialValue = () => {
  355. let array = [];
  356. for (let i = 0; i < formVlaue.value.materialList.length; i++) {
  357. array.push(formVlaue.value.materialList[i].materialCode);
  358. }
  359. materialValue.value = array;
  360. return array;
  361. };
  362. const setFormMaterial = () => {
  363. formVlaue.value.materialList = formVlaue.value.materialList.filter((item) => {
  364. const res = materialValue.value.includes(item.materialCode);
  365. return res;
  366. });
  367. };
  368. //初始化页面数据
  369. const resetData = () => {
  370. excelViewRef.value.saveCellData();
  371. excelViewRef.value.reset();
  372. resetAddForm();
  373. excelKey.value = excelKey.value + 1;
  374. options.value = {
  375. opreaState: true,
  376. in: true,
  377. out: true,
  378. print: true,
  379. edit: true,
  380. };
  381. exceldata.value = null;
  382. selectId.value = null;
  383. operaEditStatus.value = false;
  384. resetForm(formRef.value);
  385. formVlaue.value.materialList = [];
  386. formVlaue.value.formName = null;
  387. formVlaue.value.state = null;
  388. excelStatus.value = false;
  389. };
  390. // 数据字典相关
  391. // 传入一个url,后面不带/
  392. const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  393. useCrud({
  394. src: "/api/v1/excelForm",
  395. });
  396. const {
  397. dataEditList,
  398. createRow,
  399. updateRow,
  400. deleteRow,
  401. searchChange,
  402. dataList,
  403. resetChange,
  404. } = Methords; //增删改查
  405. const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  406. const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  407. // 设置表格列或者其他自定义的option
  408. option.value = Object.assign(option.value, {
  409. selection: true,
  410. viewBtn: false,
  411. editBtn: false,
  412. delBtn: true,
  413. addBtn: false,
  414. menu: false,
  415. column: [
  416. {
  417. label: "模版名称",
  418. prop: "formName",
  419. headerAlign: "center",
  420. align: "center",
  421. search: true,
  422. overHidden: true,
  423. rules: [
  424. {
  425. required: true,
  426. message: "请填写图纸编号",
  427. trigger: "blur",
  428. },
  429. ],
  430. },
  431. {
  432. label: "物料编码",
  433. slot: true,
  434. search: true,
  435. headerAlign: "center",
  436. align: "center",
  437. prop: "materialCode",
  438. addDisplay: false,
  439. },
  440. {
  441. label: "物料名称",
  442. slot: true,
  443. search: true,
  444. headerAlign: "center",
  445. align: "center",
  446. prop: "materialName",
  447. addDisplay: false,
  448. },
  449. {
  450. label: "规格",
  451. slot: true,
  452. headerAlign: "center",
  453. align: "center",
  454. prop: "spec",
  455. addDisplay: false,
  456. },
  457. {
  458. label: "修改时间",
  459. slot: true,
  460. headerAlign: "center",
  461. align: "center",
  462. prop: "updated",
  463. addDisplay: false,
  464. },
  465. ],
  466. });
  467. // 存放操作表格相关业务代码
  468. const useAddTemplateHook = () => {
  469. //excelView 组件实例
  470. const excelViewRef = ref(null);
  471. //表格配置项
  472. const options = ref({
  473. //头部操作区域
  474. opreaState: true,
  475. //导入按钮展示
  476. in: true,
  477. //导出按钮展示
  478. out: true,
  479. print: true,
  480. //编辑状态 false:为查看状态
  481. edit: true,
  482. //当前操作表格名称
  483. inName: "",
  484. });
  485. //双向绑定表格data变量
  486. const exceldata = ref(null);
  487. //控制表格组件展示界面变量(包括表格展示页面和操作页面)
  488. const excelStatus = ref(false);
  489. //新增模版
  490. const addTemplate = () => {
  491. excelStatus.value = true;
  492. };
  493. //查看
  494. const lookTep = (row) => {
  495. options.value.edit = false;
  496. selectId.value = row.id;
  497. exceldata.value = JSON.parse(row.excelData);
  498. excelStatus.value = true;
  499. getSettingData();
  500. };
  501. //编辑
  502. const editTep = (row) => {
  503. options.value.inName = row.formName;
  504. exceldata.value = JSON.parse(row.excelData);
  505. formVlaue.value.formName = row.formName;
  506. formVlaue.value.state = row.state;
  507. selectId.value = row.id;
  508. operaEditStatus.value = true;
  509. excelStatus.value = true;
  510. getSettingData();
  511. };
  512. //删除
  513. const deleteTep = async (row) => {
  514. const { data, code } = await delExcel({
  515. id: row.id,
  516. });
  517. if (code == "200") {
  518. ElMessage.success("删除成功!");
  519. dataEditList();
  520. }
  521. };
  522. //获取组件内实时数据赋值到外层
  523. const confirm = (data) => {
  524. exceldata.value = data;
  525. };
  526. return {
  527. excelStatus,
  528. options,
  529. addTemplate,
  530. confirm,
  531. exceldata,
  532. excelViewRef,
  533. lookTep,
  534. editTep,
  535. deleteTep,
  536. };
  537. };
  538. const {
  539. excelStatus,
  540. options,
  541. addTemplate,
  542. confirm,
  543. exceldata,
  544. excelViewRef,
  545. lookTep,
  546. editTep,
  547. deleteTep,
  548. } = useAddTemplateHook();
  549. const useFormHook = () => {
  550. //KEY告知组件刷新
  551. const excelKey = ref(1);
  552. //表单data
  553. const formVlaue = ref({
  554. formName: null,
  555. materialList: [],
  556. state: null,
  557. });
  558. //表单是否为编辑状态变量
  559. const operaEditStatus = ref(false);
  560. //选中的行id
  561. const selectId = ref(null);
  562. //表单ref实例
  563. const formRef = ref(null);
  564. //表单校验规则
  565. const rules = reactive({
  566. formName: [
  567. {
  568. required: true,
  569. trigger: "blur",
  570. },
  571. ],
  572. materialList: [
  573. {
  574. required: true,
  575. trigger: "blur",
  576. },
  577. ],
  578. state: [
  579. {
  580. required: true,
  581. trigger: "blur",
  582. },
  583. ],
  584. });
  585. //新增模版
  586. const submitForm = async (formEl) => {
  587. //@ts-ignore;
  588. excelViewRef.value.confirm();
  589. if (exceldata.value == null) return ElMessage.error("请提供表格数据!");
  590. if (!formEl) return;
  591. await formEl.validate(async (valid, fields) => {
  592. if (valid) {
  593. const { data, code } = await addExcel({
  594. ...formVlaue.value,
  595. excelData: exceldata.value,
  596. });
  597. if (code == "200") {
  598. ElMessage.success("添加成功!");
  599. resetData();
  600. dataEditList();
  601. }
  602. }
  603. });
  604. };
  605. //更新行内信息
  606. const updateExForm = async (formEl) => {
  607. //@ts-ignore;
  608. excelViewRef.value.saveCellData();
  609. //@ts-ignore;
  610. excelViewRef.value.confirm();
  611. if (exceldata.value == null) return ElMessage.error("请提供表格数据!");
  612. if (!formEl) return;
  613. await formEl.validate(async (valid, fields) => {
  614. if (valid) {
  615. const { data, code } = await updateExcel({
  616. ...formVlaue.value,
  617. excelData: exceldata.value,
  618. id: selectId.value,
  619. settings: settings.value,
  620. });
  621. if (code == "200") {
  622. ElMessage.success("修改成功!");
  623. resetData();
  624. dataEditList();
  625. }
  626. }
  627. });
  628. };
  629. //表达数据重置
  630. const resetForm = (formEl) => {
  631. if (!formEl) return;
  632. formEl.resetFields();
  633. };
  634. return {
  635. formVlaue,
  636. formRef,
  637. rules,
  638. selectId,
  639. excelKey,
  640. operaEditStatus,
  641. submitForm,
  642. resetForm,
  643. updateExForm,
  644. };
  645. };
  646. const {
  647. formVlaue,
  648. formRef,
  649. rules,
  650. selectId,
  651. excelKey,
  652. operaEditStatus,
  653. submitForm,
  654. resetForm,
  655. updateExForm,
  656. } = useFormHook();
  657. //表格新增 分页
  658. const useAddFormHook = () => {
  659. const formRef1 = ref(null);
  660. const settings = ref([]);
  661. const searchForm = ref({
  662. pageNo: 1,
  663. pageSize: 5,
  664. totalPages: 0,
  665. });
  666. const addForm = ref({
  667. paramName: "",
  668. position: "",
  669. up: "",
  670. down: "",
  671. standard: "",
  672. source: "手动",
  673. });
  674. const addPage = () => {
  675. searchForm.value.pageNo = searchForm.value.pageNo + 1;
  676. getSettingData();
  677. };
  678. const deletePage = () => {
  679. searchForm.value.pageNo = searchForm.value.pageNo - 1;
  680. getSettingData();
  681. };
  682. const getSettingData = async () => {
  683. const { data } = await getSettingsData({
  684. excelFormId: selectId.value,
  685. ...searchForm.value,
  686. });
  687. settings.value = data.records;
  688. settings.value.forEach((item) => {
  689. if (item.checkStr) {
  690. item.up = JSON.parse(item.checkStr).up;
  691. item.down = JSON.parse(item.checkStr).down;
  692. item.standard = JSON.parse(item.checkStr).standard;
  693. item.source = JSON.parse(item.checkStr).source;
  694. }
  695. });
  696. if (settings.value.length == 0 && searchForm.value.pageNo > 1) {
  697. deletePage();
  698. }
  699. searchForm.value.totalPages = data.totalPages;
  700. };
  701. const addSettings = async () => {
  702. addForm.value.checkStr = JSON.stringify({
  703. up: addForm.value.up,
  704. down: addForm.value.down,
  705. standard: addForm.value.standard,
  706. source: addForm.value.source,
  707. });
  708. const { data, code } = await addSettingsData({
  709. excelFormId: selectId.value,
  710. ...addForm.value,
  711. });
  712. if (code == "200") {
  713. ElMessage.success("添加成功");
  714. resetAddForm();
  715. getSettingData();
  716. }
  717. };
  718. const deleteSettings = async (id) => {
  719. const { data, code } = await deleteSettingsData({ id: id });
  720. if (code == "200") {
  721. ElMessage.success("删除成功");
  722. getSettingData();
  723. }
  724. };
  725. const resetAddForm = () => {
  726. addForm.value = {
  727. paramName: "",
  728. position: "",
  729. };
  730. searchForm.value = {
  731. pageNo: 1,
  732. pageSize: 5,
  733. totalPages: 0,
  734. };
  735. settings.value = [];
  736. };
  737. const creatAddForm = async () => {
  738. await formRef1.value.validate(async (valid, fields) => {
  739. if (valid) {
  740. addSettings();
  741. }
  742. });
  743. };
  744. const addRules = reactive({
  745. paramName: [
  746. {
  747. required: true,
  748. trigger: "blur",
  749. },
  750. ],
  751. position: [
  752. {
  753. required: true,
  754. trigger: "blur",
  755. },
  756. ],
  757. up: [
  758. {
  759. required: false,
  760. trigger: "blur",
  761. },
  762. ],
  763. down: [
  764. {
  765. required: false,
  766. trigger: "blur",
  767. },
  768. ],
  769. standard: [
  770. {
  771. required: false,
  772. trigger: "blur",
  773. },
  774. ],
  775. source: [
  776. {
  777. required: false,
  778. trigger: "blur",
  779. },
  780. ],
  781. });
  782. return {
  783. formRef1,
  784. addForm,
  785. searchForm,
  786. settings,
  787. addRules,
  788. creatAddForm,
  789. resetAddForm,
  790. getSettingData,
  791. addSettings,
  792. addPage,
  793. deleteSettings,
  794. deletePage,
  795. };
  796. };
  797. const {
  798. formRef1,
  799. addForm,
  800. searchForm,
  801. settings,
  802. addRules,
  803. creatAddForm,
  804. deletePage,
  805. addPage,
  806. resetAddForm,
  807. getSettingData,
  808. deleteSettings,
  809. } = useAddFormHook();
  810. watch(
  811. () => formVlaue.value.materialList,
  812. (value) => {
  813. setMaterialValue();
  814. },
  815. {
  816. immediate: true,
  817. }
  818. );
  819. onMounted?.(() => {
  820. dataEditList();
  821. });
  822. </script>
  823. <style lang="scss" scoped>
  824. .table {
  825. width: 430px;
  826. padding-top: 20px;
  827. }
  828. .btns {
  829. width: 100%;
  830. justify-content: center;
  831. height: 40px;
  832. display: flex;
  833. align-items: center;
  834. .el-button {
  835. height: 30px;
  836. }
  837. }
  838. .add {
  839. width: 430px;
  840. height: 220px;
  841. display: flex;
  842. flex-direction: column;
  843. .body {
  844. display: flex;
  845. width: 430px;
  846. flex: 1;
  847. }
  848. }
  849. #table {
  850. height: calc(100vh - 540px) !important;
  851. }
  852. .editView {
  853. width: 100%;
  854. height: calc(100vh - 140px);
  855. display: flex;
  856. .exView {
  857. position: relative;
  858. width: calc(100% - 450px);
  859. height: 100%;
  860. }
  861. .form {
  862. width: 450px;
  863. height: 100%;
  864. font-size: 24px;
  865. padding: 20px;
  866. padding-right: 0px;
  867. .title {
  868. text-align: center;
  869. margin-bottom: 10px;
  870. }
  871. .btns {
  872. display: flex;
  873. align-items: center;
  874. justify-content: center;
  875. }
  876. }
  877. }
  878. :deep(.el-form-item) {
  879. margin-bottom: 10px !important;
  880. }
  881. :deep(.el-input__inner) {
  882. height: 24px !important;
  883. }
  884. </style>